Calendar
A month grid to pick a date or a range of dates.
September 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
30 | 31 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 1 | 2 | 3 |
import {Calendar} from 'alinea/components'
export function CalendarExample() {
return <Calendar aria-label="Delivery date" defaultValue="2026-09-23" />
}Props
<Calendar>
PropTypeDefaultDescription
valuestring | nullDefault –The selected date,
YYYY-MM-DDdefaultValuestring | nullDefault –
onValueChange(value: string) => voidDefault –
localestring; /** The earliest selectable date, `YYYY-MM-DD` */ min?: string; /** The latest selectable date, `YYYY-MM-DD` */ max?: string; disabled?: boolean; readOnly?: boolean; autoFocus?: boolean; /** Returns true for dates that cannot be selected, receives `YYYY-MM-DD` */ disabledDates?: (date: string) => boolean;Default –BCP 47 locale used to format dates, eg.
en-GB, defaults to the user's localeAlso accepts className and style, id and aria-* labelling attributes and data-* attributes.
<RangeCalendar>
PropTypeDefaultDescription
valueDateRange | nullDefault –
defaultValueDateRange | nullDefault –
onValueChange(value: DateRange) => voidDefault –
localestring; /** The earliest selectable date, `YYYY-MM-DD` */ min?: string; /** The latest selectable date, `YYYY-MM-DD` */ max?: string; disabled?: boolean; readOnly?: boolean; autoFocus?: boolean; /** Returns true for dates that cannot be selected, receives `YYYY-MM-DD` */ disabledDates?: (date: string) => boolean;Default –BCP 47 locale used to format dates, eg.
en-GB, defaults to the user's localeAlso accepts className and style, id and aria-* labelling attributes and data-* attributes.