Month grid for a single date or a range, one or two months wide; months slide in with a blur in the direction of travel and the range band sweeps out from the start day.
calendardaterangedate gridscheduling
Installation
$npx shadcn@latest add @geturui/calendar
Usage
usage.tsx
1import { Calendar, type DateRange } from "@/components/ui/calendar";
2
3export function SprintDates() {
4 const [range, setRange] = React.useState<DateRange>({ start: null, end: null });
5 return <Calendar mode="range" numberOfMonths={2} value={range} onValueChange={setRange} weekStartsOn={1} />;
6}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "range" | "single" | One date (Date | null) or a { start, end } range. |
value / defaultValue / onValueChange | Date | null | DateRange | — | Selection, typed by mode. |
today | Date | — | Day marked as today. Omit to read the clock after hydration; pass one in tests and demos. |
min / max | Date | — | Bounds; navigation stops at their months. |
disabledDates / isDateDisabled | Date[] / (date) => boolean | — | Days that cannot be picked. |
highlightedDates | Date[] | — | Days with a dot (releases, deadlines). |
weekStartsOn | 0–6 | 0 | First column, 0 = Sunday. |
numberOfMonths | 1 | 2 | 1 | Months side by side (stacked under 640px). |
showOutsideDays | boolean | true for one month | Show adjacent-month days; clicking one turns the page. |
month / defaultMonth / onMonthChange | Date | — | Visible month, controlled or not. |
footer | ReactNode | — | Rendered under the grid. |
date helpers | functions | — | addDays, addMonths, compareDays, formatDate, formatRange, toISODate, parseISODate, useToday: deterministic local-day math. |
Accessibility
- Follows the APG date grid: arrows move by day and week, Home/End to week edges, Page Up/Down by month, Shift+Page by year, Enter or Space selects.
- Roving tabindex keeps one day in the tab order; days carry aria-selected, aria-disabled and aria-current="date", with the full date as text.
- Weekday headers use abbr for full names; the visible month is announced in a polite live region.
- Slides and band sweeps become fades under reduced motion.