Components

CalendarProvider

Manages shared state across calendar views — selection, bounds, locale, and more.

Props

PropTypeDefaultDescription
formatF"PlainDate"The value format used for date serialization. Determines the type of value, defaultValue, min, max, and callback parameters.
minRawValueForFormat<F>—Earliest selectable date. Dates before this are disabled.
maxRawValueForFormat<F>—Latest selectable date. Dates after this are disabled.
disabledbooleanfalseWhen true, the entire calendar is disabled.
readOnlybooleanfalseWhen true, the calendar is read-only. Keyboard navigation still works but selection is prevented.
isDateDisabled(date: PlainDate) => boolean—Callback to disable individual dates. Return true to disable a date. Called in addition to min/max bounds checking.
timeZonestringThe system's current time zone.IANA time zone identifier used for date/time conversions.
localestring"en-US"BCP 47 locale string used for formatting month names, weekday labels, and other locale-sensitive output.
temporalTemporalNamespace—Custom Temporal namespace for environments without native Temporal support.
weekStartDayWeekStartDay0Day of the week the calendar grid starts on. 0 = Sunday, 1 = Monday, ..., 6 = Saturday.
childrenReact.ReactNode—React children.
selectionMode"single" | "range" | "multiple""single"
valueRawValueForFormat<F> | DateRange<F> | RawValueForFormat<F>[] | null—The controlled selected date. Pass null to clear.
defaultValueRawValueForFormat<F> | DateRange<F> | RawValueForFormat<F>[]—
onValueChange((value: RawValueForFormat<F> | null, meta: ValueChangeMeta<RawValueForFormat<F> | null>) => void) | ((value: RawValueForFormat<F> | null, meta: ValueChangeMeta<RawValueForFormat<F> | null>) => void) | ((value: DateRange<F> | null, meta: ValueChangeMeta<DateRange<F> | null>) => void) | ((value: DateRange<F> | null, meta: ValueChangeMeta<DateRange<F> | null>) => void) | ((value: RawValueForFormat<F>[], meta: ValueChangeMeta<RawValueForFormat<F>[]>) => void) | ((value: RawValueForFormat<F>[], meta: ValueChangeMeta<RawValueForFormat<F>[]>) => void)—

Stable Context

PropTypeDefaultDescription
onSelect*(date: PlainDate) => void—Selects (or toggles) a date, respecting the current selection mode.
setRange*(start: PlainDate, end: PlainDate) => void—Programmatically sets the range boundaries (normalized so start <= end).
selectionMode*"single" | "range" | "multiple"—The active selection mode.
disabled*boolean—Whether the entire calendar is disabled.
readOnly*boolean—Whether the calendar is read-only.
isDateDisabled(date: PlainDate) => boolean—User-supplied predicate for individually disabled dates.
minValuePlainDate—Earliest selectable date (resolved from the min prop).
maxValuePlainDate—Latest selectable date (resolved from the max prop).
timeZone*string—Resolved IANA time zone.
locale*string—Resolved BCP 47 locale.
temporal*TemporalNamespace—Resolved Temporal namespace.
weekStartDay*WeekStartDay—Day the calendar week starts on.
rangeMode*RangeMode—Active range selection mode.
preventRangeReversal*boolean—Whether reversed ranges are auto-sorted instead of collapsed.
valueFormat*"object" | "PlainDate" | "PlainDateTime" | "PlainMonthDay" | "PlainTime" | "PlainYearMonth" | "ZonedDateTime" | "Date"—The value format discriminant.
setHoveredDate*(date: PlainDate | undefined) => void—Sets the hovered date for range preview.

State Context

PropTypeDefaultDescription
selected*DateValueObject | undefined—The currently selected value as a tagged DateValueObject.
selectedDates*PlainDate[]—Flat array of all selected dates (plain dates, sorted).
rangeStart*PlainDate | undefined—Start of the current range selection, or undefined.
rangeEnd*PlainDate | undefined—End of the current range selection, or undefined.
hoveredDate*PlainDate | undefined—The currently hovered date (for range preview).
previewStart*PlainDate | undefined—Start of the computed preview range.
previewEnd*PlainDate | undefined—End of the computed preview range.