Date & time

Calendar

A single date grid with full keyboard navigation and locale-aware formatting — the primitive underneath DatePicker and DateRangePicker.

Calendar

Preview

July 2026

Mon

Tue

Wed

Thu

Fri

Sat

Sun

tsx

import { Calendar } from "@vesture/react";

<Calendar value={selectedDate} onChange={setSelectedDate} minDate={new Date()} weekStartsOn={0} />

Arrow keys move by day/week, Home/End jump within the week, PageUp/PageDown jump by month (skipping disabled dates).
Roving tabindex; role="grid"/"row"/"gridcell".
rangeEnd shades a visual range between value and rangeEnd — selection itself stays single-date via value/onChange, which is what DateRangePicker builds range selection on top of.

Prop	Type	Default	Description
value / defaultValue	Date \| null	—	Controlled / uncontrolled selected date.
onChange	(date: Date) => void	—	Fires on selection.
rangeEnd	Date \| null	—	Optional second endpoint for range shading.
month / onMonthChange	Date	—	Controlled displayed month.
minDate / maxDate	Date	—	Bounds.
isDateDisabled	(date: Date) => boolean	—	Extra disable predicate, e.g. weekends.
weekStartsOn	0 \| 1	1	Sunday or Monday.
locale	string	"en-US"	BCP 47 locale for month/weekday names.