Vue Functional Calendar is a modern calendar and datepicker component built for Vue.js, designed as a lightweight, high-performance solution for date selection and calendar display functionality. The component is written in native JavaScript without introducing third-party library dependencies, prioritizing small memory usage and good performance while maintaining high scalability and customizable styling.

The component supports multiple operational modes including a standard date picker, date range selection, multiple calendar displays, and modal calendar functionality. It can be installed via npm and integrated into Vue applications either through Vue.use() global registration or as an imported component. The repository includes a live demo accessible through CodeSandbox, showcasing the component's capabilities and usage patterns.

The calendar offers extensive configuration options through its props system. Users can control fundamental behavior such as whether the week starts on Sunday, set the current date displayed, and define date limits for selection. The component supports minimum and maximum selection constraints for date ranges, allowing developers to enforce business logic like requiring at least three days or at most ten days in a selection. Date formatting is customizable with options like dd/mm/yyyy or yyyy/mm/dd, and a placeholder can be specified for date inputs.

Advanced features include a time picker that can be enabled alongside date selection, with configurable active hours and minutes to limit the available time options. The component supports multiple calendar displays simultaneously, with options to show them separately or together. Navigation can be customized through list-based month and year selection with configurable step increments, or traditional arrow navigation. The calendar can operate in modal mode with optional auto-closing behavior when dates are selected, and supports manual date typing when in modal mode.

Customization extends to visual presentation through marked dates and date ranges that can be highlighted with custom CSS classes, disabled dates or day names to prevent selection, and enabled dates to create whitelist-based restrictions. The component includes customizable day names, month names, and short month names for internationalization. Visual options include dark theme support, week number display, animation transitions, expandable layout functionality, and control over which elements are hidden. The title and navigation arrows can be positioned flexibly.

The component exposes multiple slots for customization including the default day component slot, separate slots for date picker and date range inputs in modal mode, and a footer slot. Events are emitted for user interactions including day clicks, day selection, month and year changes, selected days count updates, mouse over events, and picker open/close states. The component provides a ref-based method interface for programmatic control beyond event handling.

Browser support spans Chrome 39 and above, Firefox 28 and above, Safari 10.1 and above, Opera 27 and above, Edge 15 and above, and the latest version of Internet Explorer. The project is licensed under MIT and maintains an active presence on npm with regular downloads. The repository is sponsored by getcopy.ai and accepts contributions through Open Collective.