Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn accessible month grid for single dates, ranges or whole weeks in any Intl calendar (Persian, Hijri, Hebrew, Buddhist and more), with ISO values.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
Use it when a person browses for a date, a range or a week, and when the calendar must follow a non-Gregorian system. It stores dates as ISO Gregorian strings, so the value works with every other component here whichever calendar is displayed.
For typing a known date use date-field; for months or years use month-picker, year-picker.
import { CalendarGrid } from "@/components/ui/calendar-grid"<CalendarGrid
mode="range"
calendar="persian"
locale="fa-IR"
value={range}
onValueChange={setRange}
numberOfMonths={2}
showWeekNumbers
/>| Prop | Type | Default | Description |
|---|---|---|---|
| mode | single | range | week | single | What one selection is. Range needs two clicks; week selects the Monday-to-Sunday of the clicked day. |
| value / defaultValue | string | DateRange | null | null | ISO date, or { from, to } in range and week mode. |
| onValueChange | (value) => void | - | Called with the same shape; a range only when both ends are chosen. |
| calendar | CalendarSystem | gregory | gregory, buddhist, chinese, coptic, ethiopic, hebrew, indian, islamic-civil, islamic-umalqura, japanese, persian, roc. |
| month / defaultMonth / onMonthChange | string | - | Any ISO date inside the visible month. |
| numberOfMonths | 1 | 2 | 1 | Months side by side. |
| min / max / isDateUnavailable | - | - | Disabled days. |
| minRangeDays / maxRangeDays | number | - | Range length limits; a pick outside restarts the range. |
| firstDay | number | from locale | 0 = Sunday ... 6 = Saturday. |
| showWeekNumbers / showOutsideDays / fixedWeeks | boolean | false / true / false | Week number column, neighbouring days, six rows. |
| markers | Record<string, string> | - | A dot and a spoken note under chosen days (events, prices). |
| today / locale / label | - | - | Reference day, locale and accessible name. |
| Keys | Action |
|---|---|
| Arrow keys | Move by a day or a week (Left and Right swap in right-to-left text) |
| Home / End | First and last day of the week |
| Page Up / Page Down | Previous or next month; with Shift, the previous or next year |
| Enter / Space | Selects the focused day |
| Escape | Drops a half-chosen range |
grid named by its visible heading, with columnheader weekday cells (full names as aria-label) and a gridcell per day.tabindex); every day button has a full-date aria-label, aria-current="date" on today and aria-selected on the cell.min/max or marked unavailable are disabled; the month heading is a polite live region so paging is announced.aria-multiselectable; the range preview on hover is also drawn on keyboard focus for weeks.Intl.DateTimeFormat with -u-ca-<calendar>; digits follow the locale's numbering system.