Components

Calendar

A month grid to pick a date or a range, fully keyboard-driven, with limits, blocked days and a year view to jump far.

S	M	T	W	T	F	S

Wednesday, September 30, 2026

Import

import { Calendar } from '@rinzai/zen';

Examples

Limits

Only the next 60 days, and no weekends: min, max and isDisabled. Weeks start on Monday here, whatever the locale.

M	T	W	T	F	S	S

API reference

<Calendar>

A month grid to pick a date, or a range of dates, fully keyboard-driven: arrows move by day and week, Home and End to the week's ends, Page Up and Down by month (with Shift, by year). The title opens a year and month grid to jump far. Dates are "YYYY-MM-DD" strings, so they never shift a day with time zones. Inline on a page, or in a popup with DatePicker.

Prop	Type	Default
`locale`Required Decides month and weekday names, and the first day of the week, e.g. "en-IN".	`string`	`—`
`onChange`Required	`((date: string) => void) \| ((range: DateRange) => void)`	`—`
`value`Required "YYYY-MM-DD", or null for none.	`DateRange \| string \| null`	`—`
`autoFocus` Focus the chosen date (or today) when shown, e.g. in a popup.	`boolean`	`—`
`className`	`string`	`—`
`defaultMonth` Month shown first ("YYYY-MM"). Defaults to the chosen date's, or this month.	`string`	`—`
`isDisabled` Dates that can't be picked, e.g. weekends or booked days.	`((date: string) => boolean)`	`—`
`max` Latest date that can be picked.	`string`	`—`
`min` Earliest date that can be picked ("YYYY-MM-DD").	`string`	`—`
`mode` Pick a start and then an end; the days between are highlighted, previewed while pointing.	`"range" \| "single"`	`—`
`months` Months shown side by side (e.g. 2 for ranges).	`number`	`—`
`weekStartsOn` 0 for Sunday … 6 for Saturday. Defaults to the locale's.	`number`	`—`

Import

Examples

Range

Limits

API reference

<Calendar>