Selection modes

Choose what users pick, and read the value back.

Four props decide what a click does. With none of them set, the calendar only displays dates and still emits dayClicked.

Bound value

<FunctionalCalendar
  v-model="value"
  is-date-range
  is-multiple-date-range
  can-clear-range
/>

The four modes

Mode	Props	Read from the value
Single date	`isDatePicker`	`selectedDate`
Multiple dates	`isMultipleDatePicker`	`selectedDates`
Range	`isDateRange`	`dateRange.start` and `dateRange.end`
Several ranges	`isDateRange` and `isMultipleDateRange`	`multipleDateRange`

Range rules

The first click sets the start and the second sets the end.
Clicking a date on or before the start makes it the new start, and the old start becomes the end.
A click after a complete range starts a new one.
selectedDaysCount fires when both ends are set. Its payload is the difference in days, so the 1st to the 3rd gives 2.
minSelDays and maxSelDays stretch or cut a range to fit.
canClearRange adds a clear button.

With several ranges, each completed range is added to multipleDateRange, and each range end shows its number. Focus a range day and press Delete or Backspace to remove that range, or click the small cross on its end.

Multiple dates

Clicking a selected date removes it. Each entry in selectedDates is { date, dateTime, hour, minute }.

See examples for every mode, and the bound value for the object shape.

Edit this pageorReport an issue

Migrate from 2.x

Move a Vue 2 app on Vue Functional Calendar 2.x to the Vue 3 build.

Multiple calendars

Show several months at once.