Examples
Multiple calendars
Show two or three months side by side, linked or independent.
Set isMultiple and calendarsCount. The calendars wrap to fit the available width.
Linked months
The calendars move together. The arrows and pickers belong to the first calendar.
Bound value
<FunctionalCalendar
v-model="value"
is-date-range
is-multiple
:calendars-count="2"
can-clear-range
/>
Independent months
With isSeparately, each calendar has its own arrows and pickers. changeYearStep of 1 pages the year list one year at a time.
Bound value
<FunctionalCalendar
v-model="value"
is-date-range
is-multiple
is-separately
:calendars-count="2"
change-month-function
change-year-function
:change-year-step="1"
can-clear-range
/>
Three calendars with a stable height
isLayoutExpandable lets a month with five weeks stay short. Without it, every calendar reserves six rows so the layout never jumps.
Bound value
<FunctionalCalendar
v-model="value"
is-date-picker
is-multiple
:calendars-count="3"
is-layout-expandable
/>
Step by more than one month
changeMonthStep sets how many months the arrows move.
Bound value
<FunctionalCalendar
v-model="value"
is-date-picker
is-multiple
:calendars-count="2"
:change-month-step="2"
/>