VCalendar

Welcome to VCalendar, a calendar a date picker plugin for Vue.js.

Version 3 brings a host of feature improvements and bug fixes, including weekly views, a simplified time picker, repeating date ranges, time rules, and performance improvements.

If upgrading from version 2.0, be sure to view the upgrade guide for breaking changes.

Theme

VCalendar provides attractive default styling based on simple colors and dark mode.

Dark Mode

Custom styling with class overrides and css variables are also available.

Calendars may be configured to adapt for multiple layouts. For example, weekly calendars can be used in constrained environments.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Also, calendars can also be configured for multi-row and multi-column layouts.

Decorate calendars with attributes on specified dates or date ranges. They can even be displayed for repeating date patterns.

VDatePicker is a feature-rich date picker component implemented as a wrapper for VCalendar, which can easily bind to a variety of date formats.

Value:4/2/2023, 12:34:00 PM (Date)

Even date ranges are supported

Start:1/6/2020, 12:00:00 AM (date)

End:1/10/2020, 12:00:00 AM (date)

Time selection is also supported with configurable hour, minute, second and millisecond accuracy.

Value:4/2/2023, 12:34:00 PM (Date)

Flexible rules can also be easily configured to dynamically limit time selection, like afternoon hours and 5-minute increments.

Value:4/2/2023, 12:34:00 PM (Date)