Calendar

A month grid for picking a day or a range. Month, weekday and day names come from Intl for the locale you pass, and the week starts on the locale's first day.

const [date, setDate] = useState<Date | null>(null);

<Calendar value={date} onValueChange={setDate} />

Import

import { Calendar, type DateRange } from "@meridui/react";

Examples

Range

mode="range": the first pick sets start, the second sets end (the two swap if the second is earlier). Hovering previews the range.

const [range, setRange] = useState<DateRange>({ start: null, end: null });

<Calendar mode="range" value={range} onValueChange={setRange} />

Min, max and disabled days

Days outside min/max or matched by isDateDisabled get aria-disabled and cannot be picked, but stay reachable with the keyboard so the grid reads naturally.

const isWeekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

<Calendar min={today} max={inTwoMonths} isDateDisabled={isWeekend} />

Locale and direction

locale localises every name the grid shows or announces. weekStartsOn overrides the first column (0 = Sunday). Under dir="rtl" the grid and arrow keys follow the reading direction.

<Calendar locale="de-DE" previousMonthLabel="Vorheriger Monat" nextMonthLabel="Nächster Monat" />
<Calendar locale="ar-EG" dir="rtl" />

API reference

Renders a div; other div attributes and the ref go on it. Dates are compared by calendar day in local time.

Styling

The cell size is --mrd-calendar-cell (36px, 44px on coarse pointers).

Accessibility

Follows the date grid in the WAI-ARIA Date Picker Dialog example. The grid is labelled by the month caption, which is a polite live region, so month changes are announced. Every day button has the full date as its name (in locale); today carries aria-current="date". The grid is one tab stop.

Related

• DatePicker — a date field with this calendar in a popover.