Calendar
shadcn/ui
react-day-picker
Inline date picker. Three modes: single, multiple, range. Used inside DatePicker popover.
@/components/ui/calendarModes
| mode | Preview | selected type | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| single | August 2026
Selected: 06/08/2026 | Date | undefined | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| multiple | August 2026
0 dates selected | Date[] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| range | August 2026
September 2026
— – — | { from?: Date; to?: Date } |
Disabled dates
Before today (past dates locked)
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Weekends disabled
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Props
| Prop | Type | Description |
|---|---|---|
| mode | "single" | "multiple" | "range" | Selection mode — single date, multiple, or a date range |
| selected | Date | Date[] | DateRange | Controlled selected date(s) |
| onSelect | function | Called when selection changes |
| disabled | Matcher | Matcher[] | Disable specific dates — e.g. { before: today } |
| numberOfMonths | number | How many months to display side by side (default: 1) |
| defaultMonth | Date | Initial month shown (uncontrolled) |
| fromDate | Date | Earliest selectable date |
| toDate | Date | Latest selectable date |
In most cases, use DatePicker or DateRangePicker instead — they wrap Calendar in a Popover with a trigger button.
On this page