Getting Started
Introduction
What Vue Functional Calendar is and what it does.
Vue Functional Calendar is a calendar and datepicker component for Vue 3. It has no runtime dependencies, and its CSS is themed with custom properties.
Bound value
What you get
- One component for a single date, several dates, a range or several ranges.
- Inline or in a modal behind an input, with typeable inputs.
- Several calendars side by side, with an optional time picker.
- Limits, disabled and enabled dates, marked dates and range presets.
- Light and dark themes through
--vfc-*custom properties. - Keyboard navigation and a grid with ARIA roles.
- Names and week start from
Intlthrough alocaleprop, and labels for every UI string. - Slots for the day cell, arrows, footer, clear button and inputs.
Which version
| Version | Vue | Docs |
|---|---|---|
| 3.x | Vue 3 | This site. |
| 2.x | Vue 2 | Pin vue-functional-calendar@^2.10.0. |
The 3.0.0 release on npm was a Vue 2 build. Vue 2 projects should stay on ^2.10.0.
Next steps
- Install the package.
- Render your first calendar.
- Browse the examples or the playground.
- Coming from 2.x? Read the migration guide.