Calendar
A token-driven calendar built on react-day-picker with single, range, and dropdown navigation modes.
Import
import { Calendar } from "@sigil-ui/components";Preview
Variants
Range selection
Caption-only navigation (no dropdowns)
Usage
const [date, setDate] = React.useState<Date>();
<Calendar mode="single" selected={date} onSelect={setDate} />For ranges:
const [range, setRange] = React.useState<DateRange>();
<Calendar mode="range" selected={range} onSelect={setRange} />Props
The Calendar accepts every prop from react-day-picker's DayPicker, plus a Sigil-themed default.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | Selection behavior. |
captionLayout | "label" | "dropdown" | "dropdown-months" | "dropdown-years" | "dropdown" | Header navigation style. |
showOutsideDays | boolean | true | Show days from the previous/next month in the grid. |
fixedWeeks | boolean | true | Always render six weeks. |
startMonth / endMonth | Date | ±100 / +10 yrs | Bounds for the dropdown selectors. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-background | Calendar surface |
--s-surface / --s-surface-elevated | Hover, dropdown panel |
--s-border / --s-border-style | Calendar frame |
--s-text / --s-text-muted / --s-text-subtle | Day text hierarchy |
--s-primary / --s-primary-contrast | Selected day fill, today indicator dot |
--s-radius-sm / --s-radius-md / --s-card-radius | Frame and day pill radii |
--s-shadow-lg | Dropdown elevation |
--s-duration-fast | Hover/select transitions |
--s-focus-ring-color / --s-focus-ring-width | Keyboard focus ring |
--s-font-mono | Weekday label typography |