Calendar
Props
API reference for Calendar. For usage examples, see the React tab.
Calendar
| Name | Type | Default |
|---|---|---|
| children | ChildrenOrFunction<CalendarRenderProps<"single">> | |
The children of the component. A function may be provided to alter the children based on component state. | ||
| createCalendar | ((identifier: CalendarIdentifier) => Calendar) | |
A function to create a new Calendar (opens in new tab) object for a given calendar identifier. If not provided, the | ||
| defaultFocusedValue | DateValue | null | |
The date that is focused when the calendar first mounts (uncontrolled). | ||
| firstDayOfWeek | "fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed" | |
The day that starts the week. | ||
| focusedValue | DateValue | null | |
Controls the currently focused date within the calendar. | ||
| hideOutsideDays | boolean | false |
Hides days that belong to the previous or next month. The cells stay in the grid so week columns remain aligned. | ||
| isDateHighlighted | ((date: T) => boolean) | |
| isDateUnavailable | ((date: DateValue) => boolean) | |
Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | ||
| isDisabled | boolean | false |
Whether the calendar is disabled. | ||
| isInvalid | boolean | |
Whether the current selection is invalid according to application logic. | ||
| isReadOnly | boolean | false |
Whether the calendar value is immutable. | ||
| maxValue | DateValue | null | |
The maximum allowed date that a user may select. | ||
| minValue | DateValue | null | |
The minimum allowed date that a user may select. | ||
| pageBehavior | PageBehavior | visible |
Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | ||
| selectionAlignment | "center" | "end" | "start" | 'center' |
Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. | ||
| selectionMode | "single" | 'single' |
Whether single or multiple selection is enabled. | ||
| visibleDuration | DateDuration | { months: 1 } |
The amount of days that will be displayed at once. This affects how pagination works. | ||
| weeksInMonth | number | |
The number of weeks in a month. This overrides the default set by the locale. | ||
CalendarCell
| Name | Type | Default |
|---|---|---|
| date (required) | CalendarDate | |
The date to render in the cell. | ||
| children | ChildrenOrFunction<CalendarCellRenderProps> | |
The children of the component. A function may be provided to alter the children based on component state. | ||
CalendarGrid
| Name | Type | Default |
|---|---|---|
| children | ReactElement<unknown, string | JSXElementConstructor<any>>[] | ReactElement<unknown, string | JSXElementConstructor<any>> | ((date: CalendarDate) => ReactElement<...>) | |
Either a function to render calendar cells for each date in the month, or children containing a | ||
| offset | DateDuration | |
An offset from the beginning of the visible date range that this CalendarGrid should display. Useful when displaying more than one month at a time. | ||
| weekdayStyle | "long" | "narrow" | "short" | 'narrow' |
The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name. | ||