RangeCalendar

Calendar for selecting a start and end date, for example a stay. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiRangeCalendar } from '@ziyarago/ui/vue'

Default

March 2027
MTWTFSS
Vue
<UiRangeCalendar start="2027-03-01" />

Controlled range

March 2027
MTWTFSS
Vue
<UiRangeCalendar v-model="value" />

Week starts on Sunday

March 2027
SMTWTFS
Vue
<UiRangeCalendar start="2027-03-01" :week-starts-on="0" />

Sizes

March 2027
MTWTFSS
March 2027
MTWTFSS
March 2027
MTWTFSS
March 2027
MTWTFSS
March 2027
MTWTFSS
Vue
<UiRangeCalendar size="xs" start="2027-03-01" />

<UiRangeCalendar size="sm" start="2027-03-01" />

<UiRangeCalendar size="md" start="2027-03-01" />

<UiRangeCalendar size="lg" start="2027-03-01" />

<UiRangeCalendar size="xl" start="2027-03-01" />

API reference

Month grid for picking a date range with hover preview. Use for stays, trips and report periods.

Props

PropType and valuesDefaultDescription
modelValuev-model[Date | string | number | null, Date | string | number | null]—Controlled range [start, end]; either end may be null. Date-only ISO strings are read as local dates. When omitted the selection is kept internally.
startDate | string | number—Month to show initially when no range is set. Does not preselect a range.
localestring'en-GB'BCP 47 locale for month and weekday names.
weekStartsOnnumber1First day of the week: 0 = Sunday, 1 = Monday.
sizexssmmdlgxl'md'Day cell and header size.

Events

Vue: @name. React: onName.

changeCalled with [start, end] Date objects. In controlled mode (modelValue set) it also fires after the first click with [start, null]; uncontrolled it fires once the second date is picked.

Notes

  • Pass modelValue to control the selection; pick a date earlier than the start to restart the range.