Calendar

selectionMode

"single" | "range"

Default: single

Single-date or start/end range selection.

onChange

(value) => void

Default: —

Fires with null when a single selection is toggled off.

onMonthChange

(month: Date) => void

Default: —

Fired when the visible month changes.

minValue / maxValue

string | Date

Default: —

Days outside the bound are disabled.

isDateUnavailable

(date: Date) => boolean

Default: —

Per-day disable predicate.

isDisabled

boolean

Default: false

Disable the whole calendar.

value / defaultValue

string | null · { start, end } | null

Default: —

Controlled / initial selection. Dates are YYYY-MM-DD.

month / defaultMonth

string | Date

Default: selection, else today

Displayed month. Accepts "YYYY-MM", "YYYY-MM-DD", or a Date.

weekStartsOn

0 | 1

Default: 0

Sunday or Monday.

showOutsideDays

boolean

Default: true

Render leading/trailing days of adjacent months.

fixedWeeks

boolean

Default: false

Always 6 rows so height doesn't jump between months.

renderDay

(ctx) => ReactNode

Default: day number

Custom day content. ctx: { date, inMonth, isToday, isSelected, isRangeStart, isRangeEnd, inRange, isDisabled }.

size

"sm" | "md" | "lg"

Default: md

Cell size.

ariaLabel

string

Default: month name

Accessible label for the grid.

classNames

{ base?, header?, heading?, nav?, navButton?, grid?, weekday?, week?, day? }

Default: —

Slot classes.