added calendarProInput()

NAMESPACE

@@ -16,6 +16,7 @@ export(autonumericInput)
 export(awesomeCheckbox)
 export(awesomeCheckboxGroup)
 export(awesomeRadio)
+export(calendarProInput)
 export(checkboxGroupButtons)
 export(chooseSliderSkin)
 export(circleButton)

R/calendar-pro-input.R

@@ -0,0 +1,106 @@
+
+#' @importFrom htmltools htmlDependency
+html_dependency_calendar_pro <- function() {
+  htmlDependency(
+    name = "calendar-pro",
+    version = "2.9.10",
+    src = c(file = system.file("packer", package = "shinyWidgets")),
+    script = "calendar-pro.js",
+    all_files = FALSE
+  )
+}
+
+
+#' @title Calendar Pro Input
+#'
+#' @description A versatile JavaScript date and time picker component,
+#'  based on [vanilla-calendar-pro](https://github.com/uvarov-frontend/vanilla-calendar-pro) JavaScript library.
+#'
+#' @inheritParams shiny::selectInput
+#' @param value Initial value.
+#' @param min The date.min parameter sets the minimum allowable date that the calendar will consider, which cannot be earlier than this date.
+#' @param max The date.max parameter sets the maximum allowable date that the calendar will consider, which cannot be later than this date.
+#' @param type Determines the type of calendar displayed: 'default' | 'multiple' | 'month' | 'year'.
+#' @param range TRUE or FALSE, in case of multiple type, allow to select a range of dates.
+#' @param months The months parameter specifies the number of displayed months when the calendar type is set to 'multiple'.
+#' @param jumpMonths The jumpMonths parameter controls the number of months to jump.
+#' @param jumpToSelectedDate When the option is enabled and 1 or more selected date(s) are provided but without providing
+#'  selected.month and selected.year, it will make the calendar jump to the first selected date. If set to false,
+#'  the calendar will always open to the current month and year.
+#' @param toggleSelected If toggleSelected parameter is true then clicking on the active cell will remove the selection from it.
+#' @param ... Other settings passed to Slim Select JAvaScript method.
+#' @param theme This parameter determines the theme of the calendar : 'light' or 'dark'.
+#' @param placeholder A character string giving the user a hint as to what can be entered into the control.
+#' @param input If `TRUE` (default), use an input and render calendar in a dropdown, otherwise calendar is rendered in the page.
+#' @param inline Display calendar container inline.
+#'
+#' @return
+#'  * UI: A `shiny.tag` object that can be used in a UI definition.
+#'  * server: a **character** vector of dates selected
+#' @export
+#'
+#' @example examples/calendar-pro.R
+calendarProInput <- function(inputId,
+                             label,
+                             value = NULL,
+                             min = NULL,
+                             max = NULL,
+                             type = c("default", "multiple", "month", "year"),
+                             range = FALSE,
+                             months = 2,
+                             jumpMonths = 1,
+                             jumpToSelectedDate = FALSE,
+                             toggleSelected = TRUE,
+                             ...,
+                             theme = "light",
+                             placeholder = NULL,
+                             input = TRUE,
+                             inline = FALSE,
+                             width = NULL) {
+  # selected <- restoreInput(id = inputId, default = selected)
+  config <- list(
+    type = match.arg(type),
+    months = months,
+    jumpMonths = jumpMonths,
+    jumpToSelectedDate = jumpToSelectedDate,
+    toggleSelected = toggleSelected,
+    ...
+  )
+  config$input <- input
+  config$settings$selected$dates <- list1(value)
+  if (config$type == "multiple")
+    config$settings$selection$day <- "multiple"
+  if (isTRUE(range))
+    config$settings$selection$day <- "multiple-ranged"
+  config$date$min <- min
+  config$date$max <- max
+  config$settings$visibility$theme <- theme
+  tag_el <- if (isTRUE(input)) {
+    tags$input(
+      type = "text",
+      class = "form-control calendar-pro-element",
+      readonly = NA,
+      placeholder = placeholder,
+      value = value
+    )
+  } else {
+    tags$div(
+      class = "calendar-pro-element"
+    )
+  }
+  tags$div(
+    id = inputId,
+    class = "form-group vanilla-calendar-pro shiny-input-container",
+    class = if (isTRUE(inline)) "shiny-input-container-inline",
+    style = css(width = validateCssUnit(width)),
+    label_input(inputId, label),
+    tag_el,
+    tags$script(
+      type = "application/json",
+      `data-for` = inputId,
+      toJSON(dropNulls(config), auto_unbox = TRUE, json_verbatim = TRUE)
+    ),
+    html_dependency_calendar_pro()
+  )
+}
+

examples/calendar-pro.R

@@ -0,0 +1,77 @@
+
+library(shiny)
+library(shinyWidgets)
+
+ui <- fluidPage(
+  theme = bslib::bs_theme(5),
+  tags$h2("Calendar Pro Input"),
+  fluidRow(
+    column(
+      width = 6,
+      calendarProInput(
+        inputId = "cal1",
+        label = "Calendar default:",
+        placeholder = "Select a date",
+        width = "100%"
+      ),
+      verbatimTextOutput("res1"),
+      calendarProInput(
+        inputId = "cal3",
+        label = "Calendar with initial value:",
+        value = Sys.Date() + 1,
+        width = "100%"
+      ),
+      verbatimTextOutput("res3"),
+      calendarProInput(
+        inputId = "cal5",
+        label = "Calendar without input field:",
+        input = FALSE,
+        width = "100%"
+      ),
+      verbatimTextOutput("res5")
+    ),
+    column(
+      width = 6,
+      calendarProInput(
+        inputId = "cal2",
+        label = "Calendar with multiple selection:",
+        type = "multiple",
+        placeholder = "Select multiple dates",
+        width = "100%"
+      ),
+      verbatimTextOutput("res2"),
+      calendarProInput(
+        inputId = "cal4",
+        label = "Calendar with range selection:",
+        type = "multiple",
+        range = TRUE,
+        width = "100%"
+      ),
+      verbatimTextOutput("res4"),
+      calendarProInput(
+        inputId = "cal6",
+        label = "Calendar  without input field:",
+        type = "multiple",
+        range = TRUE,
+        months = 3,
+        input = FALSE,
+        width = "100%"
+      ),
+      verbatimTextOutput("res6")
+    )
+  )
+)
+
+server <- function(input, output, session) {
+
+  output$res1 <- renderPrint(input$cal1)
+  output$res2 <- renderPrint(input$cal2)
+  output$res3 <- renderPrint(input$cal3)
+  output$res4 <- renderPrint(input$cal4)
+  output$res5 <- renderPrint(input$cal5)
+  output$res6 <- renderPrint(input$cal6)
+
+}
+
+if (interactive())
+  shinyApp(ui, server)

inst/packer/calendar-pro.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! name: vanilla-calendar-pro v2.9.10 | url: https://github.com/uvarov-frontend/vanilla-calendar-pro */

package.json

@@ -32,6 +32,7 @@
     "nouislider": "^15.7.1",
     "slim-select": "^2.9.2",
     "style-loader": "^3.3.1",
+    "vanilla-calendar-pro": "^2.9.10",
     "virtual-select-plugin": "^1.0.45",
     "webpack": "^5.95.0",
     "webpack-cli": "^4.9.1",

srcjs/config/entry_points.json

@@ -10,5 +10,6 @@
   "input-icons": "./srcjs/inputs/input-icons.js",
   "input-time": "./srcjs/inputs/input-time.js",
   "WinBox": "./srcjs/exts/WinBox.js",
-  "slim-select": "./srcjs/inputs/slim-select.js"
+  "slim-select": "./srcjs/inputs/slim-select.js",
+  "calendar-pro": "./srcjs/inputs/vanilla-calendar-pro.js"
 }