Calendar

The calendar control lets people select and view a single date or a range of dates in their calendar. It’s made up of 3 separate views: the month view, year view, and decade view.

For more details and examples visit the official docs. The R package cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Usage

Calendar(...)

Calendar.shinyInput(inputId, ..., value = shiny.react::JS("new Date()"))

updateCalendar.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

...

Props to pass to the component. The allowed props are listed below in the Details section.

inputId

ID of the component.

value

Starting value.

session

Object passed as the session argument to Shiny server.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app. The update functions return nothing (called for side effects).

Details

• allFocusable boolean
  Allows all dates and buttons to be focused, including disabled ones

• autoNavigateOnSelection boolean
  Whether the month view should automatically navigate to the next or previous date range depending on the selected date. If this property is set to true and the currently displayed month is March 2017, if the user clicks on a day outside the month, i.e., April 1st, the picker will automatically navigate to the month of April.

• className string
  Optional class name to add to the root element.

• componentRef IRefObject<ICalendar>
  Optional callback to access the ICalendar interface. Use this instead of ref for accessing the public methods and properties of the component.

• dateRangeType DateRangeType
  The date range type indicating how many days should be selected as the user selects days

• dateTimeFormatter ICalendarFormatDateCallbacks
  Apply additional formating to dates, for example localized date formatting.

• firstDayOfWeek DayOfWeek
  The first day of the week for your locale.

• firstWeekOfYear FirstWeekOfYear
  Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values

• highlightCurrentMonth boolean
  Whether the month picker should highlight the current month

• highlightSelectedMonth boolean
  Whether the month picker should highlight the selected month

• isDayPickerVisible boolean
  Whether the day picker is shown beside the month picker or hidden.

• isMonthPickerVisible boolean
  Whether the month picker is shown beside the day picker or hidden.

• maxDate Date
  If set the Calendar will not allow navigation to or selection of a date later than this value.

• minDate Date
  If set the Calendar will not allow navigation to or selection of a date earlier than this value.

• navigationIcons ICalendarIconStrings
  Customize navigation icons using ICalendarIconStrings

• onDismiss () => void
  Callback issued when calendar is closed

• onSelectDate (date: Date, selectedDateRangeArray?: Date[]) => void
  Callback issued when a date is selected

• restrictedDates Date[]
  If set the Calendar will not allow selection of dates in this array.

• selectDateOnClick boolean
  When clicking on "Today", select the date and close the calendar.

• shouldFocusOnMount boolean
  This property has been removed at 0.80.0 in place of the focus method, to be removed \@ 1.0.0.

• showCloseButton boolean
  Whether the close button should be shown or not

• showGoToToday boolean
  Whether the "Go to today" link should be shown or not

• showMonthPickerAsOverlay boolean
  Show month picker on top of date picker when visible.

• showSixWeeksByDefault boolean
  Whether the calendar should show 6 weeks by default.

• showWeekNumbers boolean
  Whether the calendar should show the week number (weeks 1 to 53) before each week row

• strings ICalendarStrings | null
  Localized strings to use in the Calendar

• today Date
  Value of today. If null, current time in client machine will be used.

• value Date
  Default value of the Calendar, if any

• workWeekDays DayOfWeek[]
  The days that are selectable when dateRangeType is WorkWeek. If dateRangeType is not WorkWeek this property does nothing.

• yearPickerHidden boolean
  Whether the year picker is enabled

Best practices

Layout

• Don’t break the control apart.

• Include an up and down arrow for navigating between time ranges and a chevron to make the calendar collapsible.

Content

• Use the following format for dates: month, day, year, as in July 31, 2016. When space is limited, use numbers and slashes for dates if the code supports that format and automatically displays the appropriate date format for different locales. For example, 2/16/19.

• Don't use ordinal numbers (such as 1st, 12th, or 23rd) to indicate a date.

Examples

library(shiny)
library(shiny.fluent)

ui <- function(id) {
  ns <- NS(id)
  div(
    Calendar.shinyInput(ns("calendar"), value = "2020-06-25T22:00:00.000Z"),
    textOutput(ns("calendarValue")),
    h3("If `value` is missing, default to system date"),
    Calendar.shinyInput(ns("calendar2")),
    textOutput(ns("calendarDefault")),
    h3("If `value` is NULL, also default to system date"),
    Calendar.shinyInput(ns("calendar3"), value = NULL),
    textOutput(ns("calendarNull"))
  )
}

server <- function(id) {
  moduleServer(id, function(input, output, session) {
    output$calendarValue <- renderText({
      sprintf("Value: %s", input$calendar)
    })
    output$calendarDefault <- renderText({
      sprintf("Value: %s", input$calendar2)
    })
    output$calendarNull <- renderText({
      sprintf("Value: %s", input$calendar3)
    })
  })
}

if (interactive()) {
  shinyApp(ui("app"), function(input, output) server("app"))
}