Best Vue.js Datepickers & Calendars 2022

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 4077

  • ⚡️ Vue 2 only (Vue 3 in alpha)

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! Oh, and the documentation is awesome, 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. 43.521

Vue Cal 1134

  • ✅ 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. 30.891

Vue Functional Calendar 449

  • ⚡️ Vue 2 only

We are also watching this component evolve, as it offers a lot of options to use it. It supports picking (multiple) dates, date ranges and times, as well as marking dates. UX-wise, it has nice functionalities that help users pick their desired dates quickly, and it also comes with a dark theme out of the box!

Vue Functional Calendar Calendar Component
icon-eye-dark Created with Sketch. 16.768

Vue Hotel DatePicker  816

  • ⚡️ Vue 2 only

This DatePicker is a great fit for booking platforms and goes one step further compared to the AirBnB DatePicker. It's a responsive component that displays the number of nights selected and has features for custom check-in/check-out rules, localisation, minimum/maximum nights selected and more.

It doesn't support single date selection, though and is crafted with a check-in / check-out-date use case in mind.

Vue Hotel Datepicker Date-Range Picker Component
icon-eye-dark Created with Sketch. 8.787

Litepie Datepicker  371

  • ⚡️ Vue 3 only

Litepie Datepicker is a date range picker component for Vue & Tailwind CSS, built on day.js. It supports picking single dates or date ranges, including a lot of features to customize the UX: Auto-apply changes, offer shortcuts, use external triggers, localize it and more!

Litepie Datepicker Date Range Picker
icon-eye-dark Created with Sketch. 6.479

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. 32.752

Vue Simple Calendar 836

  • ✅ 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 specific 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. 17.630

Vue 3 Datepicker  1128

  • ⚡️ Vue 3 only

vue3-date-time-picker 1128 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's still pretty new, but offers many features already and the repo is very actively maintained!

Vue 3 Datepicker Datetime Picker Component
icon-eye-dark Created with Sketch. 12.553
Similar Articles
Best Vue.js Notification Components 2023
30.01.2023  •  in #UI Components
I've collected some of my favourite, versatile (and mostly lightweight) Vue.js Notification, Alert & Toast Components in this article!
Top Vue.js Carousel & Slideshow Components 2023
30.01.2023  •  in #UI Components
Needing to build carousels have caused me some of the most painful moments of my freelance career. I have probably seen every version of them that designers can think of. So, before you use a carousel: Have you checked ? 🙃 No, but seriously: If you...