DEVELOPER REFERENCE · v4.0.0

CalendarMonthGrid API

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

CalendarMonthGrid20 props4 callbacks0 methods

Props20

CalendarMonthGrid props
Name	Type	Description
`dates`Required	`readonly ISODateString[]`Inspect type	ISO dates displayed by the calendar grid or weekday row.
`system`Optional	`DisplayCalendarSystem \| undefined`Inspect type	Calendar system used to render month and year values.
`selectedDates`Optional	`readonly ISODateString[] \| undefined`Inspect type	Independent ISO dates selected in multiple-selection mode.
`visibleMonths`Optional	`readonly ISODateString[] \| undefined`Inspect type	Months shown together, used to distinguish outside dates.
`weekNumber`Optional	`((date: ISODateString) => string) \| undefined`Inspect type	Formats the week-number label for the supplied date.
`weekNumberLabel`Optional	`string \| undefined`	Accessible label for the week-number column.
`month`Required	`ISODateString`Inspect type	Month currently displayed, expressed as a library ISO date string.
`focusedDate`Required	`ISODateString`Inspect type	ISO date of the day that currently has keyboard focus.
`referenceDate`Optional	`ISODateString \| undefined`Inspect type	Reference ISO date used for Today and relative calendar presentation.
`selection`Optional	`CalendarDateRange \| undefined`Inspect type	Current selected date/range, or the selection mode where the declared type is a mode string.
`preview`Optional	`CalendarDateRange \| undefined`Inspect type	Date range currently previewed while the user chooses a selection.
`previewInvalid`Optional	`boolean \| undefined`	Marks the preview as unavailable without changing the committed selection.
`previewDescriptionId`Optional	`string \| undefined`	ID of the accessible explanation associated with invalid preview dates.
`showOutsideDays`Required	`boolean`	Renders dates belonging to adjacent months in the current month grid.
`allowOutsideMonthSelection`Required	`boolean`	Allows selecting visible dates from adjacent months.
`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.
`isDisabled`Required	`(date: ISODateString) => boolean`Inspect type	Return true when the supplied date must not be interactive.
`formatDayLabel`Required	`(date: ISODateString) => string`Inspect type	Formats the accessible name for a calendar day.
`setDayRef`Required	`(date: ISODateString, element: HTMLButtonElement \| null) => void`Inspect type	Registers day elements so the calendar can manage keyboard focus.

Events and callbacks4

CalendarMonthGrid events and callbacks
Name	Type	Description
`onFocus`Required	`(date: ISODateString) => void`Inspect type	Called when focus moves to an item or control; the signature identifies the focused value.
`onPreview`Required	`(date?: ISODateString) => void`Inspect type	Updates the date preview; undefined clears it.
`onKeyDown`Required	`(event: h.JSX.TargetedKeyboardEvent<HTMLButtonElement>, date: ISODateString) => void`Inspect type	Handles keyboard input; receives the keyboard event and any item/date context shown in the signature.
`onSelect`Required	`(date: ISODateString) => void`Inspect type	Called when the user selects an item. The signature identifies the selected value and any additional context.

Methods0

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