update calendar pro

NAMESPACE

@@ -103,6 +103,7 @@ export(updateAutonumericInput)
 export(updateAwesomeCheckbox)
 export(updateAwesomeCheckboxGroup)
 export(updateAwesomeRadio)
+export(updateCalendarPro)
 export(updateCheckboxGroupButtons)
 export(updateColorPickr)
 export(updateCurrencyInput)

R/calendar-pro-input.R

@@ -40,9 +40,9 @@ html_dependency_calendar_pro <- function() {
 #' @param selectWeekNumbers If `TRUE` select the week when week number is clicked.
 #' @param selectionTimeMode This parameter enables time selection. You can also specify the time format using a boolean value or a number: 24-hour or 12-hour format.
 #' @param selectedTime Initial time value.
-#' @param ... Other settings passed to Slim Select JAvaScript method.
+#' @param ... Other settings passed to Calendar Pro JavaScript method, see [online documentation](https://vanilla-calendar.pro/docs/reference/settings) for reference.
 #' @param locale This parameter sets the language localization of the calendar. You can specify a language label according to BCP 47 or provide arrays of month and weekday names.
-#'  See https://vanilla-calendar.pro/docs/reference/settings#locale.
+#'  See [online documentation](https://vanilla-calendar.pro/docs/reference/settings#locale).
 #' @param format Format to use when displaying date in input field, if an initial value is provided it must be a date so that the format apply.
 #' @param positionToInput This parameter specifies the position of the calendar relative to input,
 #'  if the calendar is initialized with the input parameter. Possible values: 'auto' | 'center' | 'left' | 'right' | c('bottom' | 'top', 'center' | 'left' | 'right')
@@ -54,7 +54,10 @@ html_dependency_calendar_pro <- function() {
 #'
 #' @return
 #'  * UI: A `shiny.tag` object that can be used in a UI definition.
-#'  * server: a **character** vector of dates selected
+#'  * server: if `parseValue=FALSE` a **character** vector of dates selected, otherwise a Date/POSIXct objet.
+#'
+#' @seealso [updateCalendarPro()] to update the widget from the server.
+#'
 #' @export
 #'
 #' @importFrom utils modifyList
@@ -187,3 +190,43 @@ calendarProInput <- function(inputId,
   )
 }
 
+
+
+
+
+
+#' @title Update calendar pro from server
+#'
+#' @description
+#' Update a [calendarProInput()] from the server.
+#'
+#' @inheritParams calendarProInput
+#' @inheritParams shiny::updateSelectInput
+#'
+#' @return No value.
+#'
+#' @seealso [calendarProInput()] for creating a widget in the UI.
+#'
+#' @export
+#'
+#' @example examples/calendar-pro-update.R
+updateCalendarPro <- function(inputId,
+                              label = NULL,
+                              value = NULL,
+                              mode = NULL,
+                              ...,
+                              session = shiny::getDefaultReactiveDomain()) {
+  if (!is.null(label))
+    label <- doRenderTags(label)
+  message <- dropNulls(list(
+    label = label,
+    options = dropNulls(list(
+      selectedDates = list1(format(value, format = "%Y-%m-%d")),
+      selectionDatesMode = mode,
+      ...
+    ))
+  ))
+  session$sendInputMessage(inputId, message)
+}
+
+

examples/calendar-pro-update.R

@@ -0,0 +1,68 @@
+
+library(shiny)
+library(shinyWidgets)
+
+ui <- fluidPage(
+  theme = bslib::bs_theme(5),
+  tags$h2("Calendar Pro Input: update from server"),
+  fluidRow(
+    column(
+      width = 6,
+      calendarProInput(
+        inputId = "calendar",
+        label = "Select a date:",
+        placeholder = "Select a date",
+        width = "100%"
+      ),
+      verbatimTextOutput("res1"),
+      textInput(
+        inputId = "label",
+        label = "Update label:"
+      ),
+      actionButton(
+        inputId = "today",
+        label = "Set value as today"
+      ),
+      actionButton(
+        inputId = "today3",
+        label = "Set value as today + 3"
+      ),
+      radioButtons(
+        inputId = "mode",
+        label = "Update mode:",
+        choices = c("single", "multiple", "multiple-ranged"),
+        inline = TRUE
+      )
+    ),
+    column(
+      width = 6
+    )
+  )
+)
+
+server <- function(input, output, session) {
+
+  output$res1 <- renderPrint(input$calendar)
+
+  observeEvent(input$label, {
+    if (isTruthy(input$label)) {
+      updateCalendarPro(inputId = "calendar", label = input$label)
+    }
+  })
+
+  observeEvent(input$today, {
+    updateCalendarPro(inputId = "calendar", value = Sys.Date())
+  })
+
+  observeEvent(input$today3, {
+    updateCalendarPro(inputId = "calendar", value = Sys.Date() + 3)
+  })
+
+  observeEvent(input$mode, {
+    updateCalendarPro(inputId = "calendar", selectionDatesMode = input$mode)
+  }, ignoreInit = TRUE)
+
+}
+
+if (interactive())
+  shinyApp(ui, server)

srcjs/inputs/vanilla-calendar-pro.js

@@ -40,7 +40,6 @@ function changeToInputSingle(fmt) {
       if (self.context?.selectedTime) {
         date = date + " " + self.context.selectedTime;
       }
-      console.log(date);
       self.context.inputElement.value = dayjs(date).format(fmt);
       //self.hide();
     } else {
@@ -138,6 +137,36 @@ $.extend(calendarProBinding, {
       var label = $("#" + el.id + "-label");
       updateLabel(data.label, label);
     }
+    if (data.hasOwnProperty("options")) {
+      var config = el.querySelector('script[data-for="' + el.id + '"]');
+      config = JSON.parse(config.text);
+      var options = data.options;
+      var calendar = calendarProBinding.store[el.id];
+      if (options.hasOwnProperty("selectionDatesMode")) {
+        if (options.selectionDatesMode == "multiple-ranged") {
+          options.onChangeToInput = changeToInputRange(config.format);
+        } else if (options.selectionDatesMode == "multiple") {
+          options.onChangeToInput = changeToInputMultiple(config.format);
+        } else {
+          options.onChangeToInput = changeToInputSingle(config.format);
+        }
+      }
+      calendar.set(options, {dates: true});
+      calendarProBinding.updateValue(el, {
+        selectedDates: calendar?.selectedDates,
+        selectedMonth: calendar?.selectedMonth,
+        selectedYear: calendar?.selectedYear,
+        selectedTime: calendar?.selectedTime
+      });
+      $(el).trigger("change");
+      if (calendar.selectionDatesMode == "multiple-ranged") {
+        changeToInputRange(config.format)(calendar);
+      } else if (calendar.selectionDatesMode == "multiple") {
+        changeToInputMultiple(config.format)(calendar);
+      } else {
+        changeToInputSingle(config.format)(calendar);
+      }
+    }
   },
   initialize: el => {
     var input = el.querySelector(".calendar-pro-element");