Calendar
A month grid for picking a single date, a range, or several dates, built on react-day-picker.
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
When to use
- Use when
- A date needs to be picked from a visible month, such as a booking page or a range filter.
- Avoid when
- People know the exact date and would rather type it; use Input with a date type.
Installation
The source lands in src/components/ui/calendar.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.
Usage
Examples
Range
Pick a start and an end date across two months.
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
November 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Disabled days
Weekends and past dates can't be picked.
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Month and year dropdowns
Jump straight to a month and year, for dates far away such as a birthday.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Built on
- Packages
@stylexjs/stylex,react-day-picker- Figma
- In progress. See Designers and Figma.