DEVELOPER REFERENCE · v4.0.0

CalendarPicker API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

CalendarPicker53 props4 callbacks0 methods

Props53

CalendarPicker props
Name	Type	Description
`className`Optional	`string \| undefined`	Additional CSS classes applied to the component root.
`dir`Optional	`"rtl" \| "ltr" \| undefined`	Text direction used by the calendar layout.
`translations`Optional	`Partial<CalendarTranslations> \| undefined`Inspect type	Overrides any subset of the exported English calendar translations.
`locale`Optional	`string \| undefined`	Locale identifier or localized label configuration used for formatting and accessible text.
`referenceDate`Optional	`ISODateString \| undefined`Inspect type	Reference ISO date used for Today and relative calendar presentation.
`calendarSystem`Optional	`DisplayCalendarSystem \| undefined`Inspect type	Calendar system used for display; stored values retain the ISO date representation.
`numberOfMonths`Optional	`number \| undefined`	Number of months displayed simultaneously.
`pagedNavigation`Optional	`boolean \| undefined`	Moves by the number of visible months instead of by a single month.
`reverseMonths`Optional	`boolean \| undefined`	Displays simultaneous months in reverse order.
`captionLayout`Optional	`"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years" \| undefined`	Chooses a text caption or month/year selection dropdowns.
`startMonth`Optional	`ISODateString \| undefined`Inspect type	Navigation bounds; unlike minDate/maxDate these do not disable day values.
`endMonth`Optional	`ISODateString \| undefined`Inspect type	Latest month available through navigation; this does not disable individual date values.
`disableNavigation`Optional	`boolean \| undefined`	Disables navigation between calendar months or years.
`showWeekNumber`Optional	`boolean \| undefined`	Displays the week-number column.
`weekNumbering`Optional	`"iso" \| "local" \| undefined`	Uses ISO week numbers or locale-based week numbering.
`formatWeekNumber`Optional	`((week: number) => string) \| undefined`Inspect type	Formats a numeric week number for display.
`footer`Optional	`ComponentChildren`Inspect type	Content rendered in the footer or after the main component content.
`cellSize`Optional	`number \| undefined`	Size of calendar day cells in pixels.
`referenceInstant`Optional	`Date \| undefined`Inspect type	Optional instant used only to resolve Today in the requested zone. ISO date values never shift.
`timeZone`Optional	`string \| undefined`	Time zone used for resolving Today; ISO date values themselves do not shift zones.
`weekStartsOn`Optional	`CalendarWeekStart \| undefined`Inspect type	First weekday of the week, from 0 (Sunday) through 6 (Saturday).
`minDate`Optional	`ISODateString \| undefined`Inspect type	Earliest selectable calendar date in the library ISO date representation.
`maxDate`Optional	`ISODateString \| undefined`Inspect type	Latest selectable calendar date in the library ISO date representation.
`isDateDisabled`Optional	`((date: ISODateString) => boolean) \| undefined`Inspect type	Return true to prevent selection of the supplied ISO date.
`showOutsideDays`Optional	`boolean \| undefined`	Renders dates belonging to adjacent months in the current month grid.
`allowOutsideMonthSelection`Optional	`boolean \| undefined`	Allows selecting visible dates from adjacent months.
`fixedWeeks`Optional	`boolean \| undefined`	Keeps a fixed six-week layout for every month.
`showTodayButton`Optional	`boolean \| undefined`	Shows the action for selecting or navigating to Today.
`showHeader`Optional	`boolean \| undefined`	Hides the complete month/year heading and navigation row.
`showNavigation`Optional	`boolean \| undefined`	Convenience switch for both previous and next actions.
`showPreviousButton`Optional	`boolean \| undefined`	Shows the previous-period navigation action.
`showNextButton`Optional	`boolean \| undefined`	Shows the next-period navigation action.
`showMonthLabel`Optional	`boolean \| undefined`	Displays the current month caption.
`showWeekdays`Optional	`boolean \| undefined`	Displays weekday column labels.
`enableYearView`Optional	`boolean \| undefined`	Allows the month/year heading to open a twelve-month overview. Defaults to true.
`views`Optional	`readonly CalendarView[] \| undefined`Inspect type	Available views. Defaults to month and year; supersedes `enableYearView`.
`defaultView`Optional	`CalendarView \| undefined`Inspect type	Initial calendar view, month or year.
`isMonthDisabled`Optional	`((month: ISODateString) => boolean) \| undefined`Inspect type	Return true to prevent selection of the supplied month.
`dayClassName`Optional	`string \| ((date: ISODateString, context: CalendarDayContext) => string \| undefined) \| undefined`Inspect type	Additional day-cell classes, optionally computed from the date and day state.
`renderDay`Optional	`((date: ISODateString, context: CalendarDayContext) => ComponentChildren) \| undefined`Inspect type	Custom content renderer for a day, receiving its ISO date and selected/disabled/preview state.
`formatMonth`Optional	`((month: ISODateString, locale: string) => string) \| undefined`Inspect type	Formats the month caption for the supplied locale.
`formatWeekday`Optional	`((date: ISODateString, locale: string) => string) \| undefined`Inspect type	Formats the weekday column label for the supplied date and locale.
`formatDayLabel`Optional	`((date: ISODateString, locale: string) => string) \| undefined`Inspect type	Formats the accessible name for a calendar day.
`validateSelection`Optional	`((date: ISODateString, context: CalendarSelectionValidationContext) => CalendarSelectionValidationResult) \| undefined`Inspect type	Validates a proposed selection. Return false or an explanatory string to reject it.
`month`Optional	`ISODateString \| undefined`Inspect type	Month currently displayed, expressed as a library ISO date string.
`defaultMonth`Optional	`ISODateString \| undefined`Inspect type	Initial displayed month when month is not controlled.
`required`Optional	`boolean \| undefined`	Requires a non-empty value or selection before the edit can be accepted.
`min`Optional	`number \| undefined`	Multiple: selected dates. Range: nights.
`max`Optional	`number \| undefined`	Maximum selected date count in multiple mode, or maximum range length in range mode.
`excludeDisabled`Optional	`boolean \| undefined`	Prevents a selected range from including disabled dates.
`mode`Required	`"range"`	Selects single-date, multiple-date or date-range selection behavior.
`selected`Optional	`CalendarRangeSelection \| undefined`Inspect type	Selected value or selected-state flag; the declared type identifies which representation the control uses.
`presets`Optional	`readonly Preset<CalendarRangeSelection>[] \| undefined`Inspect type	Predefined labeled date selections offered as quick actions.

Events and callbacks4

CalendarPicker events and callbacks
Name	Type	Description
`onInvalidSelection`Optional	`((reason: string, date: ISODateString) => void) \| undefined`Inspect type	Receives the rejection reason and the attempted date when selection validation fails.
`onViewChange`Optional	`((view: CalendarView) => void) \| undefined`Inspect type	Receives the newly selected calendar view.
`onMonthChange`Optional	`((month: ISODateString) => void) \| undefined`Inspect type	Receives the newly requested visible month; update month in controlled compositions.
`onSelectionChange`Required	`(value: CalendarRangeSelection \| undefined) => void`Inspect type	Receives the updated selection in the shape specified by the active selection mode.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.