Data Display
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
Import
import { Calendar } from "@mikenotthepope/substrateui"Static Display
Direction
The month-navigation chevrons are already handled: the calendar root carries rtl:**:[.rdp-button_previous>svg]:rotate-180 and its next-button twin, so "previous month" points to the start of the line in either direction. Nothing to add at the call site.
The grid itself runs the way the locale does, and the weekday order comes from the locale rather than from the direction — set locale as well as flipping direction, or you get an RTL calendar that still starts its week on Sunday. See Direction (RTL).
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. |