6 Best Vue.js Calendar Components To Render Event Calendars On The App
Vue Functional Calendar
Vue.js Functional Calendar | Component/Package https://vue-functional-calendar.now.sh/
Modern calendar and datepicker module for Vue.js
- Lightweight, high-performance calendar component based on Vue.js
- Small memory usage, good performance, good style, and high scalability
- Native js development, no third-party library introduced
- Date Picker, Date Range, Multiple Calendars, Modal Calendar
Vue Sweet Calendar
A simple and sweet vue.js calendar
V Calendar
An elegant calendar and datepicker plugin for Vuejs.
A lightweight, dependency-free plugin for building attributed calendars in Vue.js https://vcalendar.io
Vue Event Calendar
A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here
Vue Simple Calendar
vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled items.
Here’s a live demo page, and the repo for it: https://www.tallent.us/vue-simple-calendar/ https://github.com/richardtallent/vue-simple-calendar-sample
Features
There are other great calendar components out there, but most are either intended to be used as date pickers, or had way too many features for me. I wanted something that would simply show a month as a grid, and show scheduled activities (including multi-day items) on that grid. While the component goes beyond that simple use case, that is still the core focus.
-
Shows a traditional month-grid calendar. Also supports weeks, years, or multiple weeks, months, or years.
-
Can show scheduled “items,” including multi-day items, with optional time of day.
-
If there are too many items to see in a week, you can scroll to see the others.
-
If there are too many weeks to see in the calendar component, you can scroll to see the others.
-
Optional support for dragging and dropping items between dates.
-
Automatic localization / internationalization (can be overridden).
-
Lightweight!
-
Flexbox layout (look ma, no tables!).
-
No external dependencies (Moment, JQuery, etc.).
-
Various user events (clicks, drags, etc.) are emitted by the calendar component.
-
Weeks can start on any day of the week (defaults to Sunday).
-
Easy to theme (using CSS) to integrate with your own site
-
Easy to customize using Vue slots
-
Date range selection (programmatic or via user drag-select)
What this component doesn’t try to do: -
There will be no “agenda” view (time-of-day grid). Adding this view would require too much additional complexity.
-
There is no interface for managing calendar items. This is far too use-specific.
-
There is no built-in AJAX mechanism. This is also far too use-specific.
-
Only the Gregorian calendar is supported (7-day weeks, etc.).
-
It is not yet possible to “resize” items to cover more or fewer days. This may be added in the future.
Vue Cal
A Vue JS full calendar, no dependency, no BS. 🤘 https://antoniandre.github.io/vue-cal
#vuejs #javascript #vue-js #vue
