Calendar
A date picker grid built on react-day-picker. Supports single, multiple, and range selection, with built-in month and year dropdowns and previous/next navigation.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Single Date
Use mode="single" for picking one date.
Range Selection
Use mode="range" to pick a start and end date. Pass numberOfMonths={2} to display two months side by side.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
Props
Forwards all react-day-picker props in addition to the ones below.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | Selection mode. |
selected | Date | Date[] | DateRange | — | Currently selected date(s). |
onSelect | (date) => void | — | Called when a date is selected. |
showOutsideDays | boolean | true | Show leading/trailing days from adjacent months. |
disabled | boolean | Matcher | — | Disable the calendar entirely or match specific dates. |