Calendar
Full calendar built on @daypicker/react. Supports single, multiple, and range selection.
Install
Import path
Examples
Date range
mode="range" over two months, with the picked span shown below.
Basic
A basic calendar component. We used className='rounded-lg border' to style the calendar.
Booked dates
A calendar component that allows users to select a date or a range of dates.
Month and Year Selector
Use captionLayout='dropdown' to show month and year dropdowns.
Custom Cell Size
A calendar component that allows users to select a date or a range of dates.
Multiple
Use mode=multiple to allow selecting multiple dates.
Presets
A calendar component that allows users to select a date or a range of dates.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Date and Time Picker
A calendar component that allows users to select a date or a range of dates.
Week Numbers
Use showWeekNumber to show week numbers.
Persian / Hijri / Jalali Calendar
A Persian (Jalali) calendar built with a date-fns-jalali DateLib and Eastern Arabic numerals.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Calendar } from "@codefast/ui/calendar";
<Calendar
mode="single" // "single" | "range" | "multiple"
selected={date}
onSelect={setDate}
/>
API reference
Props for each part of the component. All native element props are also forwarded.
Calendar
Wraps @daypicker/react; every DayPicker prop is forwarded.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "multiple" | "single" | How many dates can be selected. Changes the selected/onSelect shape. |
| selected | Date | DateRange | Date[] | — | Controlled selection — type depends on mode. |
| onSelect | (value) => void | — | Fires with the new selection. |
| numberOfMonths | number | 1 | How many months to render side by side. |
| disabled | Matcher | Matcher[] | — | Disable days (e.g. past dates, weekends). |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Arrow+Right | Moves to the next day. |
| Arrow+Left | Moves to the previous day. |
| Arrow+Down | Moves to the same weekday next week. |
| Enter | Selects the focused day. |
| Page Up | Jumps to the previous month. |
- Built on @daypicker/react, which implements the WAI-ARIA grid pattern.
- Pair with a readout or input so the selection isn’t conveyed only by colour.
- For a popover date field, mount Calendar inside a Popover with a trigger button.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Show the selected date(s) in text near the calendar.
- Disable invalid ranges (e.g. past dates for a booking).
Don’t
- Don’t use a calendar for far-future or distant-past dates — an input is faster.
- Don’t hide which dates are selectable.