Calendar
A date picker calendar built on react-day-picker with themed styling. Supports single date, range, and multiple date selection modes.
Single Date Selection
const [date, setDate] = React.useState<Date | undefined>(new Date())
<Calendar
mode="single"
selected={date}
onSelect={setDate}
/>Static Display
<Calendar />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "range" | "multiple" | — | Selection mode. Single selects one date, range selects a start and end, multiple allows selecting many dates. |
selected | Date | DateRange | Date[] | — | The currently selected date(s). Type depends on the mode prop. |
onSelect | (date: Date | DateRange | Date[] | undefined) => void | — | Callback fired when the selection changes. |
showOutsideDays | boolean | true | Whether to display days from adjacent months in the calendar grid. |
className | string | — | Additional CSS classes to apply to the calendar container. |