Calendar
Interactive date picker with support for single dates, ranges, and multiple selections
The calendar displays a month grid for picking a single date, a range, or several dates. Use it inline for date entry or inside a popover for a date-picker field. It is built on React DayPicker, so all of its props pass through.
Preview
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| 26 | 27 | 28 | 29 | 30 | 31 | 1 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
Installation
Usage
Examples
The mode prop sets what a click selects.
| Value | Description |
|---|---|
single | One date at a time. |
range | A start and end date. |
multiple | Any number of individual dates. |
Single Date Selection
Use mode="single" to pick one date.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected date: Thu Aug 20 2026
Date Range Selection
Use mode="range" to pick a start and end date.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Sat Jan 20 2024 - Thu Jan 25 2024
Multiple Dates Selection
Use mode="multiple" to pick several individual dates.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected dates: 0
Disabled Dates
Use the disabled prop to block specific dates from selection.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
With Footer
Pass a footer to render content below the grid.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
API Reference
The Calendar is built on top of react-day-picker's DayPicker. All DayPicker props are supported and pass through. The documentation below covers the key props and the styling hooks specific to our implementation.
For the complete API, see the react-day-picker documentation.
Props
Calendar
Month grid for selecting dates. Wraps DayPicker, forwarding all props to it.