Calendar
Date field built on react-day-picker for single, multiple, and range selection.
<Calendar mode="single" selected={date} onSelect={setDate}/>Usage
import { Calendar } from "@reva/ui";Calendar wraps react-day-picker. Pass mode="single" | "multiple" | "range" and the matching selected / onSelect pair to drive selection. Internally the day cell renders as an IconButton, the prev/next chevrons reuse buttonVariants, and --cell-size controls grid sizing — override via className if you need a denser or larger calendar.
Examples
Range
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2}/>Multiple
<Calendar mode="multiple" selected={days} onSelect={setDays}/>Caption layout
Use captionLayout="dropdown" to swap the month/year label for month and year dropdowns. Bound the selectable years with startMonth / endMonth.
<Calendar mode="single" selected={date} onSelect={setDate} captionLayout="dropdown" startMonth={new Date(2015, 0)} endMonth={new Date(2030, 11)}/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | — | Selection model from react-day-picker. |
selected | Date | Date[] | DateRange | undefined | — | Selected day(s); shape depends on mode. |
onSelect | (value) => void | — | Selection change handler. |
numberOfMonths | number | 1 | How many month grids to render side-by-side. |
captionLayout | "label" | "dropdown" | "dropdown-months" | "dropdown-years" | "label" | Header layout for the month/year caption. |
buttonVariant | ButtonProps["variant"] | "ghost" | Variant applied to the prev/next navigation buttons. |
showOutsideDays | boolean | true | Render days from sibling months in the grid. |
locale | Locale | — | Locale passed through to react-day-picker. |
className | string | — | Merged onto the calendar root. |
Additional DayPicker props from react-day-picker are forwarded.