Best Vue.js Datepickers & Calendars 2024

Why create a custom calendar yourself, if there are so many really great Vue.js components already?

We've collected our favourite calendars & datepickers based on whether they are well maintained, easy to use, look nice and provide a good UX. This list will grow over time, and it's in no particular order.

If you think I'm missing an essential entry on this list (or one of them is deprecated and I didn't notice!) - let me know via Twitter @MadeWithVueJS!

V-Calendar 4235

  • ✅ Supports Vue 2 + 3

V-Calendar is a calendar component as well as a DatePicker. The calendar supports highlights and popovers, the DatePicker supports single dates, multiple dates and date range selections. 

It's very customizable and lets you easily disable certain date patterns like weekends or the first Monday of every month.

A+ for style and animation, and the documentation is great, too. We use(d) it in a lot of projects, including madewithvuejs.com itself!

V-Calendar Calendar & Datepicker Component
icon-eye-dark Created with Sketch. 44.460

Vue Cal 1168

  • ✅ Supports Vue 2 + 3

Vue Cal's motto is "no dependency, no bullshit", and that summarizes it pretty well. It does not only offer a flexible, feature-rich date picker, but full calendar views as well – so if you need both in your apps you should definitely check this out.

Vue Cal Date Picker & Calendar Component
icon-eye-dark Created with Sketch. 32.461

Bryntum Calendar

  • ✅ Supports Vue 2 + 3

The calendar solution by Bryntum is a performance-optimized component for advanced use cases. It's a JS calendar that comes with a Vue wrapper and demos for Vue 2 and 3.

It's not a date picker at all, but more like a full-fledged event calendar application supporting recurring tasks, filtering, ICS export and lots of customization options. It also provides multiple view modes like agenda, day, week, month and year views.

Bryntum Calendar Calendar Component
icon-eye-dark Created with Sketch. 35.575

Vue 3 Datepicker  1290

  • ⚡️ Vue 3 only

vue3-date-time-picker 1290 is a configurable Vue 3 component to pick single dates, date ranges, months and more. It supports localization and SSR and comes with a dark and light themes.

It aims to be a highly configurable, complete solution for all your Vue 3 projects, and you can find the docs on the equally confident URL vue3datepicker.com  😉

It offers many features and the repo is very actively maintained!

Vue 3 Datepicker Datetime Picker Component
icon-eye-dark Created with Sketch. 14.332

Vue Simple Calendar 857

  • ✅ Supports Vue 2 + 3

Vue Simple Calendar is a lightweight event calendar component available in a Vue 2 and Vue 3/Vite version. It's a themeable solution based on a flexbox layout, supporting drag-and-drop multi-day events.

While it offers a solid foundation, it is very clear about not trying to be a one-size-fits-all component that supports every use case. It does not f.ex. offer an interface for adding events to the calendar.

Vue Simple Calendar Event Calendar Component
icon-eye-dark Created with Sketch. 20.598

Vue Flatpickr 960

  • ✅ Supports Vue 2 + 3

Flatpickr is a lightweight, minimally styled date-time picker component. This is a Vue component for it, featuring reactive values and config options. It's working seamlessly with form validation libraries, and can be localized easily.

Vue Flatpickr is a solid solution for basic use cases - lean, UX-driven, extensible!

icon-eye-dark Created with Sketch. 13.012
Similar Articles
Best Vue Form Libraries of 2024
26.03.2024  •  in #UI Components
Forms are an important ingredient for almost every web app. But they can get complex pretty fast, and you’ll have to work through the repetitive processes of handling, storing and validating your data for every custom form. At some point, you'll be...
Best Vue.js Datatables 2024
12.02.2024  •  in #UI Components
Datatables are a complex beast. If you ever built data-heavy business applications, you will probably know it's not easy to make them readable and clear. Discover some of the best datatable components for Vue.js that are flexible enough to adapt to your data and use case.