Calendar Component
A date picker with pill-shaped day buttons and solid ink borders.
Single Date Selection
Default calendar without orbit hover effect - suitable for use inside popovers.
Selected: 1/21/2026
Standalone with Hover Effect
Add orbit-hover-offset when calendar is displayed standalone (not in a popover).
Date Range Selection
Range: 1/21/2026 - 1/28/2026
Multiple Date Selection
Selected: 3 date(s)
Two Month View
With Week Numbers
Disabled Dates
Past dates and weekends are disabled
API Reference
Calendar is built on top of react-day-picker. All props from DayPicker are supported.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "multiple" | "range" | - | Selection mode |
| selected | Date | Date[] | DateRange | - | Selected date(s) |
| onSelect | (date) => void | - | Selection callback |
| numberOfMonths | number | 1 | Number of months to display |
| disabled | (date) => boolean | - | Function to disable dates |
| showWeekNumber | boolean | false | Show week numbers |
| showOutsideDays | boolean | true | Show days from adjacent months |