Calendar
An accessible standalone month-grid date picker.
Category: inputs · WCAG 2.2-AA · calendar, date, month, grid, picker, input
Sizes
- sm
- md
- lg
States
- default
- selected
- today
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
isInRange | (date: Date) => boolean | — | Highlight predicate for range previews (used by DateRangePicker). |
isRangeStart | (date: Date) => boolean | — | Predicate marking the range's start date for styling. |
isRangeEnd | (date: Date) => boolean | — | Predicate marking the range's end date for styling. |
onDayHover | (date: Date | null) => void | — | Called with the hovered day (or null on leave) to drive range previews. |
value | Date | null | — | Controlled selected date |
defaultValue | Date | — | Uncontrolled initial selected date |
onValueChange | (date: Date) => void | — | Called when a day is selected |
min | Date | — | Earliest selectable date |
max | Date | — | Latest selectable date |
disabled | (date: Date) => boolean | — | Predicate to disable individual days |
locale | string | — | BCP-47 locale; defaults to the current i18n locale |
size | 'sm' | 'md' | 'lg' | md | Grid cell size |
labels | CalendarLabels | — | i18n label overrides for the nav buttons |
month | number | — | Controlled view month (0-11) |
year | number | — | Controlled view year |
onViewChange | (view: { month: number; year: number }) => void | — | Called when the visible month changes |
hideNav | boolean | false | Hides the prev/next nav so a parent can drive navigation |
Design tokens
--cascivo-calendar-bg--cascivo-calendar-radius--cascivo-calendar-cell-size--cascivo-calendar-day-selected-bg--cascivo-calendar-day-selected-fg--cascivo-calendar-day-today-color--cascivo-calendar-range-bg
When to use
- Showing an always-visible month grid for picking a single date (inline, not a popover)
- As the building block inside a date-picker or date-range-picker popover
When not to use
- A compact form field where an inline grid wastes space — use DatePicker (trigger + popover)
- Selecting a contiguous date range — use DateRangePicker, which composes two calendars
How to build an accessible Calendar in React →
Examples
Basic
Uncontrolled calendar
<Calendar defaultValue={new Date(Date.UTC(2024, 5, 15))} />Constrained
Limits the selectable range
<Calendar min={new Date(Date.UTC(2024, 5, 1))} max={new Date(Date.UTC(2024, 5, 30))} />Disabled weekends
Predicate disables individual days
<Calendar disabled={(d) => [0, 6].includes(d.getUTCDay())} />Related components
- DatePicker — Use the popover-based picker when an inline grid is too heavy for the layout
- DateRangePicker — The range picker renders two Calendar instances side-by-side