Calendar
Date grid built on react-day-picker v9. Supports single, multiple, and range selection modes. Keyboard navigable and localizable.
April 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
pnpm
pnpm dlx @hex-core/cli add calendarRange selection
Pick a start and end date
tsx
import { useState } from "react";
import type { DateRange } from "react-day-picker";
import { Calendar } from "@/components/ui/calendar";
export function Example() {
const [range, setRange] = useState<DateRange | undefined>();
return <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
mode | string | single | Selection mode: 'single' | 'multiple' | 'range' |
selected | object | — | Controlled selected value (Date, Date[], or DateRange depending on mode) |
onSelect | function | — | Callback when selection changes |
disabled | object | — | DayPicker Matcher — accepts a Date, Date[], { from, to }, { before | after }, or a (date: Date) => boolean predicate |
showOutsideDays | boolean | true | Render days from the previous/next month in the grid |
numberOfMonths | number | 1 | How many months to display side-by-side |
defaultMonth | object | — | The month to render first (uncontrolled). Date object. |
fromDate | object | — | Earliest selectable date (Date). Days before are disabled. |
toDate | object | — | Latest selectable date (Date). Days after are disabled. |
locale | object | — | date-fns Locale object (e.g. `import { es } from 'date-fns/locale'`) for weekday/month labels |
weekStartsOn | number | 0 | First day of the week (0 = Sunday, 1 = Monday, …, 6 = Saturday) |
classNames | object | — | Per-part className overrides (merged with defaults) |
AI Guidance
When to use
Use for inline date selection UIs, or as the month-grid inside a DatePicker (wrapped in a Popover). Supports single date, multi-date, and range modes.
When not to use
Don't use when only a text date input is needed (use Input type=date). Don't embed inside a very narrow container — the grid needs ~280px min width. For scheduling UIs with time, combine with a separate time picker.
Common mistakes
- Passing a string to selected (must be a Date, Date[], or DateRange object)
- Forgetting mode prop (default is single, but being explicit avoids confusion)
- Overriding classNames completely instead of spreading — loses default styling
- Using inside a Server Component without marking the consumer 'use client'
Accessibility
react-day-picker wires aria-label, aria-selected, and keyboard navigation (arrows, Home/End, PageUp/Down). Focus rings on day buttons use the ring token.
Related components
Token budget: 800