Forms & Inputs

Calendar

A month grid for picking a single date, multiple dates, or a range.

Install

import { Calendar } from 'vael-ui'

selectionMode

view

locale

firstDayOfWeek

motionCss ?

import { Calendar } from 'vael-ui'

<Calendar selectionMode="single" view="date" locale="en-US" :firstDayOfWeek="0" motionCss>Calendar</Calendar>

Name	Type	Default	Description
`selectionMode`	`"single" \| "range"`	`"single"`
`view`	`"date" \| "month" \| "year"`	`"date"`
`minDate`	`Date \| undefined`	`undefined`
`maxDate`	`Date \| undefined`	`undefined`
`disabledDates`	`CalendarDisabledDates \| undefined`	`undefined`	List of unavailable dates, or a predicate function. Matched by calendar day, ignoring time.
`locale`	`string \| undefined`	`undefined`	BCP-47 locale for month/weekday names and week start day. Omitted uses runtime default.
`firstDayOfWeek`	`number \| undefined`	`undefined`	0 (Sunday) – 6 (Saturday). Omitted derives from `locale`, falling back to Sunday.
`motionCss`	`boolean \| undefined`	`true`	`false` skips month-navigation slide transition.
`ui`	`Partial<{ root: UiPartValue; header: UiPartValue; navButton: UiPartValue; label: UiPartValue; weekdays: UiPartValue; weekday: UiPartValue; grid: UiPartValue; cell: UiPartValue; }> \| undefined`	`undefined`
`modelValue`	`Date \| CalendarRange \| null \| undefined`	`null`

Name	Type	Description
`day`	`{ date: Date; isCurrentMonth: boolean; isToday: boolean; isSelected: boolean; isDisabled: boolean; }`	Per-day cell content in the date grid - falls back to the day number when unused. Doesn't replace the cell's own click/hover/keyboard-focus wiring or its aria attributes, just what renders inside it, so a caller can badge/mark a day (e.g. "has N items scheduled") without forking the whole grid/keyboard-nav/month-transition logic Calendar already owns.

Name	Type	Description
`update:modelValue`	`[value: Date \| CalendarRange \| null]`
`change`	`[value: Date \| CalendarRange \| null]`
`month-change`	`[value: Date]`