Data Display
Calendar
A calendar displays one or more date grids and allows users to select a single date.
A calendar displays one or more date grids and allows users to select a single date.
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Component props#
| Name | Type | Description |
|---|---|---|
| mode | 'single' | 'multiple' | 'range' | Selection mode (default: "single") |
| selected | Date | Date[] | DateRange | Selection for the current mode |
| onSelect | (selected: Date | Date[] | DateRange | undefined) => void | Called when the selection changes in any mode |
| value | Date | Controlled selected date (compat prop for mode="single") |
| defaultValue | Date | Default selected date |
| minValue | Date | Minimum selectable date |
| maxValue | Date | Maximum selectable date |
| isDisabled | boolean | Disables the calendar |
| isReadOnly | boolean | Makes the calendar read-only |
| captionLayout | 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years' | Month/year caption style (default: "label") |
| showOutsideDays | boolean | Shows muted days from adjacent months (default: true) |
| buttonVariant | ButtonVariant | Button style used for day and nav buttons (default: "quiet") |
| classNames | ClassNames | Merged over the default react-day-picker class names |
| onChange | (date: Date | undefined) => void | Called when the date changes in mode="single". Receives undefined when deselected. |