Range Calendar

Inline calendar for selecting a start and end date. Built on reka-ui. For a button + popover wrapper, use RangeCalendarPicker.

Default

Pick start, then end. Range highlights in between.

Event Date, June 2026

Render two months side by side for picking longer ranges.

Event Date, June - July 2026

Constrain selection with minValue and maxValue; dates outside are disabled.

Props, events, and slots for each sub-component.

Props

Prop	Type	Default	Description
modelValue	{ start: DateValue, end: DateValue }	—	Selected range. Supports v-model.
numberOfMonths	number	1	Render multiple months side by side.
minValue	DateValue	—	Earliest selectable date.
maxValue	DateValue	—	Latest selectable date.
locale	string	"en"	Locale for month/day names.

Events

Event	Description
update:modelValue	Fires when the range changes. Enables v-model.
update:placeholder	Fires when the focused month changes during navigation.

Slots

Slot	Description
calendar-heading	Scoped slot to override the month/year heading. Receives { headingValue }.

Keyboard shortcuts and ARIA behavior.

Keyboard

Shortcut	Description
`←`	Moves to the previous day.
`→`	Moves to the next day.
`↑`	Moves to the same day in the previous week.
`↓`	Moves to the same day in the next week.
`Page Up`	Moves to the previous month.
`Page Down`	Moves to the next month.
`Enter`	Selects the focused date as a range endpoint.
`Space`	Selects the focused date as a range endpoint.