Essentials
Multiple calendars
Show several months at once.
Set isMultiple and calendarsCount. calendarsCount has no effect without isMultiple.
Bound value
<FunctionalCalendar
v-model="value"
is-date-range
is-multiple
:calendars-count="2"
is-separately
change-month-function
change-year-function
/>
Linked or separate
By default the calendars move together and the first calendar owns the arrows and the month and year pickers. With isSeparately, each calendar has its own arrows and pickers.
Height
Each calendar reserves six week rows so the layout does not jump when a month has five. isLayoutExpandable removes the reserved rows.
Related props
| Prop | Use |
|---|---|
changeMonthStep | Months moved by an arrow click. Default 1. |
changeYearStep | Years moved in the year picker. Default 3. |
titlePosition, arrowsPosition | Where the title and arrows sit. |
The calendars wrap onto new lines when the container is narrow.