Surfaces
Calendar
A month, as a grid of days.
When to reach for it
Examples
default
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Notes
A month, as a grid of days.
Wraps react-day-picker rather than building a calendar, and the reason is the long tail: a month grid is easy, and everything around it is not — the keyboard contract (arrows move a day, Page moves a month, Home and End reach the week's ends), the aria-live announcement when the month changes, week numbering, the first day of the week varying by locale, and the fact that "today" and "selected" are different states a screen reader must hear apart.
Every class is replaced rather than layered over the library's stylesheet, so nothing here depends on a CSS file this package does not control — but the library's OWN class is kept on each slot, because passing a class REPLACES it and every .rdp-* selector downstream depends on those.
Props
Also accepts everything in DayPickerProps. Those are forwarded to the underlying element and are not listed row by row.
Keyboard
| Key | Does |
|---|---|
| ←→ | Moves by a day. |
| ↑↓ | Moves by a week. |
| Page UpPage Down | Moves by a month. |
| HomeEnd | Jumps to the week's first or last day. |
| EnterSpace | Chooses the focused day. |
Accessibility
- Arrows move a day, Page keys move a month, Home and End reach the week’s ends.
- “Today” is an outline and “selected” is a fill — one is a fact about the calendar, the other a choice the reader made, and they must not look alike.
- Month and year are the system’s own Select, not the platform’s: a native list of a hundred years is a scroll rather than a choice, and it arrives styled by the operating system.
- The default span is ten years either side. A birth date needs a wider one, and asks for it with startMonth.