Vue Functional Calendar

Lightweight calendar and datepicker for Vue 3

Documentation

Live examples, a playground and the full reference are at https://manukminasyan.github.io/vue-functional-calendar/.

Date picker, date range with presets, multiple calendars, time picker, modal and typeable inputs, theming with dark mode, keyboard support and Intl locales. No runtime dependencies.

Install

npm install vue-functional-calendar

This is the Vue 3 build and needs Vue ^3.3.0. Vue 2 users install vue-functional-calendar@^2.10.0.

Usage

Import the component and its stylesheet.

<script setup>
import { ref } from 'vue'
import { FunctionalCalendar } from 'vue-functional-calendar'
import 'vue-functional-calendar/style.css'
const value = ref({})
</script>
<template>
  <FunctionalCalendar v-model="value" is-date-range can-clear-range />
</template>

value.dateRange holds the start and end of the range.

Upgrading from 2.x

Read MIGRATION.md. Templates that use v-model need no change, and the stylesheet is now a separate import.

License

MIT