Calendar
Standalone date grid with month navigation, keyboard accessibility, and date constraints. Use directly when you need an always-visible calendar, or compose with DatePicker for an input-triggered popover.
Examples
Su
Mo
Tu
We
Th
Fr
Sa
Sunday, April 26, 2026
Min / max dates
Su
Mo
Tu
We
Th
Fr
Sa
Disabled dates
Su
Mo
Tu
We
Th
Fr
Sa
Props
value
Date
Controlled selected date.
defaultValue
Date
Initial selected date for uncontrolled usage.
onValueChange
(date: Date) => void
Called when a date is selected.
min
Date
Earliest selectable date. Dates before this are disabled.
max
Date
Latest selectable date. Dates after this are disabled.
disabled
(date: Date) => boolean
Called for each date — return true to disable it.
defaultMonth
Date
Month to display initially. Defaults to the selected date or today.
className
string
Additional classes on the calendar wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | — | Controlled selected date. |
| defaultValue | Date | — | Initial selected date for uncontrolled usage. |
| onValueChange | (date: Date) => void | — | Called when a date is selected. |
| min | Date | — | Earliest selectable date. Dates before this are disabled. |
| max | Date | — | Latest selectable date. Dates after this are disabled. |
| disabled | (date: Date) => boolean | — | Called for each date — return true to disable it. |
| defaultMonth | Date | — | Month to display initially. Defaults to the selected date or today. |
| className | string | — | Additional classes on the calendar wrapper. |