Selection modes

Every example is live. Click a day and read the bound value under the calendar. The code under each value is what runs above it.

Single date

Set isDatePicker, then read selectedDate.

<FunctionalCalendar v-model="value" is-date-picker />

Date range

Set isDateRange. The first click sets the start, the second sets the end. Hover shows the range before you commit.

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

Multiple dates

Set isMultipleDatePicker. Click a selected day again to remove it.

<FunctionalCalendar v-model="value" is-multiple-date-picker />

Multiple date ranges

Add isMultipleDateRange to a range picker to collect several ranges. Focus a range day and press Delete or Backspace to remove that range.

<script setup>
const value = ref({
  multipleDateRange: [{ start: '3/10/2026', end: '9/10/2026' }]
})
</script>

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

Pick the month and year

Turn on changeMonthFunction and changeYearFunction to click the title and jump. changeYearStep sets how far the year list pages.

<FunctionalCalendar
  v-model="value"
  is-date-picker
  change-month-function
  change-year-function
/>