Calendar
Date selection with clear navigation, localization and disabled days; built on react-day-picker.
react-day-picker reference ↗| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add calendarDependencies
What add calendar installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
Examples
4 examples · 1 component| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Single date
Controlled selection; the footer reports the chosen date for screen readers too.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range across two months
mode="range" with two months side by side; they stack on narrow screens.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Disabled days and limits
Weekends and past days are disabled and navigation stays within three months.
| lu | ma | mi | ju | vi | sá | do |
|---|---|---|---|---|---|---|
Localized with dropdowns
Spanish locale (Monday first) and month/year dropdowns for distant dates.
API reference
Keeps the props of react-day-picker, plus ZUNO's styles; the table lists the ones you use most.
| Prop | Type | Default |
|---|---|---|
modeSelection mode; pair it with selected and onSelect. | "single" | "multiple" | "range" | — |
selected / onSelectControlled selection; the type follows mode. | Date | Date[] | DateRange | — |
disabledDays that cannot be selected: dates, ranges, { before }, { after } or { dayOfWeek }. | Matcher | Matcher[] | — |
startMonth / endMonthNavigation limits; required context for captionLayout="dropdown". | Date | — |
numberOfMonthsMonths shown side by side (stacked on narrow screens). | number | 1 |
captionLayoutMonth and year dropdowns for distant dates. | "label" | "dropdown" | "dropdown-months" | "dropdown-years" | "label" |
locale / weekStartsOndate-fns locale from react-day-picker/locale; weekday names, labels and first day follow it. | Locale / 0–6 | en-US |
timeZoneIANA zone for "today" and the selected dates. | string | — |
showOutsideDaysShows the adjacent months' days, muted; off by default with numberOfMonths > 1 to avoid repeated days. | boolean | true with one month |
CalendarDayButtonExported day button; reuse it when you override components. | button | — |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Today | Accent fill and semibold when not selected. |
| Selected | Primary fill on the chosen day. |
| Range | Start and end in primary, the days between in accent with a continuous band. |
| Outside | Adjacent-month days are muted (showOutsideDays). |
| Disabled | Dimmed and not selectable; navigation stops at startMonth/endMonth. |
| Focus | Visible outline on the focused day, managed by the grid's roving focus. |
Accessibility
The month is a grid: arrows move by day and week, Page Up/Down by month (Shift for year), Home/End to the week edges; focus is roving and lands on the selected day or today.
Each day has a full accessible label ("Today, Friday, September 25th, 2026, selected") and the navigation buttons are named after the target month.
Disabled days stay focusable for context but cannot be selected; today and the selection are marked with text weight and fill, not color alone.
Localize with locale: month and weekday names, labels and the first day of the week come from the same source. Render it inside a labelled region or popover so users know what date they pick.