Vue Functional Calendar
A lightweight calendar and datepicker for Vue 3. Pick single dates, ranges with presets, several months or a time, with keyboard support, dark mode and Intl locales built in. No runtime dependencies.
Pick a start date, or choose a preset.
<FunctionalCalendar v-model="value" is-date-range presets can-clear-range />Why Vue Functional Calendar?
Date picker
Pick one date or several, inline or in a modal behind a typeable input.
Ranges and presets
Select one range or many, with minimum and maximum lengths and one-click presets.
Multiple calendars
Show two or more months side by side, linked or independent.
Time picker
Add hours and minutes to a single date, a range or several dates.
Theming and dark mode
Restyle everything with --vfc-* custom properties, in light and dark.
Keyboard and ARIA
Arrow-key navigation, a labeled date grid and managed focus.
Intl locales
Day names, month names and week start from the browser, plus labels for every string.
Slots
Replace the day cell, arrows, footer, clear button and inputs.
Up and running in a minute
Import the component and its stylesheet, bind a model, and pick a mode with one prop. Every string, color and slot is yours to change later.
App.vue
<script setup>
import { ref } from 'vue'
import { FunctionalCalendar } from 'vue-functional-calendar'
import 'vue-functional-calendar/style.css'
const calendar = ref({})
</script>
<template>
<FunctionalCalendar
v-model="calendar"
is-date-range
presets
can-clear-range
/>
</template>