Skip to content

RangeCalendar ​

Overview ​

A full-featured date range calendar built on RangeCalendarRoot. Supports range selection with configurable date constraints and navigation.

Theme entry: RangeCalendar

Props ​

NameTypeRequiredDefaultDescription
iconOverrideObjectnullA partial icon registry ({ [componentName]: { [iconName]: { component, props } } }) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants.
themeOverrideObjectnullA partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
classstring|array|objectundefinedAdditional CSS classes to apply to the calendar root.
modelValueobjectundefinedThe currently selected date range (use with v-model).
defaultValueobjectundefinedThe default selected date range.
placeholderobjectundefinedThe current placeholder date (use with v-model:placeholder).
defaultPlaceholderobjectundefinedThe default placeholder date shown when no date is selected.
localestringundefinedThe locale string used for date formatting.
minValueobjectundefinedThe minimum selectable date value.
maxValueobjectundefinedThe maximum selectable date value.
fixedWeeksbooleanundefinedWhether to always display a fixed number of weeks.
isDateDisabledfuncundefinedA function that returns true for dates that should be disabled.
isDateUnavailablefuncundefinedA function that returns true for dates that are unavailable.
numberOfMonthsnumberundefinedThe number of months to display at once.
pagedNavigationbooleanundefinedWhether to use paged navigation (advance by numberOfMonths at a time).
preventDeselectbooleanundefinedWhether to prevent deselecting an already-selected date.
weekStartsOnnumberundefinedThe day of the week the calendar starts on (0 = Sunday).
weekdayFormatstringundefinedThe format of weekday labels: "narrow", "short", or "long".
calendarLabelstringundefinedAn accessible label for the calendar.
disabledbooleanundefinedWhether the calendar is disabled.
readonlybooleanundefinedWhether the calendar is read-only.
initialFocusbooleanundefinedWhether to focus the calendar on mount.
dirstringundefinedThe reading direction.
asstring|objectundefinedThe HTML element or component to render as.
asChildbooleanundefinedWhether to render as a child element.

Events ​

NameDescription
update:modelValueEmitted when the value changes.
update:placeholderEmitted when the placeholder date changes.

Full event reference

Source ​

client/lib/controls/range-calendar/RangeCalendar.vue