Calendar
Calendar
A react-day-picker v10 calendar grid, restyled to match the kit — single date, a range, or multiple. The base for DatePicker, DateRangePicker, and DateTimePicker, which each wrap it in a trigger + popover.
import { Calendar } from "@pompeitech/vesuvius-ui";Single date
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Month/year dropdown navigation
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
API
Calendar accepts every prop react-day-picker's own DayPicker does, plus one addition:
| Prop | Type | Default | Description |
|---|---|---|---|
buttonVariant | "ghost" | "outline" | "ghost" | Style of the prev/next month nav buttons and, with captionLayout="dropdown", the month/year dropdown triggers. |
The most commonly used DayPicker props:
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "range" | "multiple" | Selection mode — changes the shape selected/onSelect expect. | |
selected | Date (single) / DateRange (range) / Date[] (multiple) | Shape depends on mode. | |
onSelect | matches selected's shape | ||
numberOfMonths | number | 1 | How many months render side by side. |
captionLayout | "label" | "dropdown" | "label" | "label" shows plain "Month Year" text; "dropdown" swaps it for two Select-like dropdowns, bounded by startMonth/endMonth. |
startMonth / endMonth | Date | Bounds for navigation and the captionLayout="dropdown" year list. | |
showOutsideDays | boolean | true | Shows the leading/trailing days of adjacent months, dimmed. |
disabled | Date | Date[] | DateRange | Matcher | Matcher[] | Dates that can't be selected. | |
min / max | number | For mode="range": minimum/maximum number of days the range must span. |
See react-day-picker's own docs for the complete reference — every prop it accepts (formatters, modifiers, locale, week numbers, and more) passes straight through.
Accessibility
Built on react-day-picker's own role="grid" implementation — arrow keys move focus by day, PageUp/PageDown jump by month, Home/End jump to the start/end of the week, and Enter/Space selects the focused day. The current day and the selected day(s) are announced via aria-current/aria-selected automatically.