Calendar

Month grid with single or range selection. Arrow keys move by day, PageUp/Down by month, Home/End jump to the month edges.

June 2026

Usage

import { Calendar } from '@bwo-ui/react';

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

<Calendar
  mode="single"
  value={date}
  onValueChange={(v) => setDate(v as Date | null)}
/>

Props

June

Prop	Type	Default	Description
`mode`	`'single' \| 'range'`	`'single'`	Single date or range selection.
`value`	`Date \| null \| DateRange`	—	Controlled selection.
`onValueChange`	`(value: Date \| null \| DateRange) => void`	—	Selection change handler.
`minDate / maxDate`	`Date \| string \| number`	—	Disable dates outside the range.
`isDateDisabled`	`(date: Date) => boolean`	—	Predicate to disable specific dates.
`weekStartsOn`	`0 \| 1`	`0`	0 = Sunday, 1 = Monday.