vue-cal is a draggable, responsive, animated event calendar component for Vue 3 or Vue 2 applications.
Features:
- default active view
- Enable / disable views
- Hide / show weekends
- Timeline w/ timerange & increment
- Support for i18n
- Split days
- Background events
- Overlap events
- Keep only default style in CSS
- Allow custom arrows
- Default active date
- Double tap on touch devices
- Built-in themes
- Resize events
- Delete events
- Emit DOM events
- Event indicator on month view
- Custom time format
- Highlight current time
- Show events on month view
- sync 2 vue-cal instances
- CSS transitions
- Multiple day events
- Custom events rendering
- Custom callback on event click
- All day events in top bar
- Custom cell rendering
- Events count on year(s) views
- min & max dates
- Today button
- Externalize locales
- Support more simultaneous events
- Sticky day splits labels
- Hide particular weekdays
- Optional week number
- Date prototypes
- Business hours
- Drag & drop events
- Resize events snap to time
- Drag events snap to time
- Drag & drop ext. events
- Disable days
- Current backlog
- Support Vue 3
- Recurring events
Basic usage:
1. Import and register the Vue Cal component.
import VueCal from 'vue-cal' import 'vue-cal/dist/vuecal.css'
export default { // ... components: { VueCal }, data: () => ({ // ... }), // ... }
2. Add the vue-cal
component to the template.
<vue-cal style="height: 400px" />
3. Available component props to customize the event calendar.
activeView: { type: String, default: 'week' }, // Only used if there are daySplits with minSplitWidth, to add the same height top spacer on time column. allDayBarHeight: { type: [String, Number], default: '25px' }, cellClickHold: { type: Boolean, default: true }, cellContextmenu: { type: Boolean, default: false }, clickToNavigate: { type: Boolean, default: false }, dblclickToNavigate: { type: Boolean, default: true }, disableDatePrototypes: { type: Boolean, default: false }, disableDays: { type: Array, default: () => [] }, disableViews: { type: Array, default: () => [] }, dragToCreateEvent: { type: Boolean, default: true }, // Start a drag creation after dragging a certain amount of pixels. // This prevents drag creation by mistake when you want to navigate. dragToCreateThreshold: { type: Number, default: 15 }, editableEvents: { type: [Boolean, Object], default: false }, events: { type: Array, default: () => [] }, eventsCountOnYearView: { type: Boolean, default: false }, eventsOnMonthView: { type: [Boolean, String], default: false }, hideBody: { type: Boolean, default: false }, hideTitleBar: { type: Boolean, default: false }, hideViewSelector: { type: Boolean, default: false }, hideWeekdays: { type: Array, default: () => [] }, hideWeekends: { type: Boolean, default: false }, locale: { type: [String, Object], default: 'en' }, maxDate: { type: [String, Date], default: '' }, minCellWidth: { type: Number, default: 0 }, minDate: { type: [String, Date], default: '' }, minEventWidth: { type: Number, default: 0 }, minSplitWidth: { type: Number, default: 0 }, onEventClick: { type: [Function, null], default: null }, onEventCreate: { type: [Function, null], default: null }, onEventDblclick: { type: [Function, null], default: null }, overlapsPerTimeStep: { type: Boolean, default: false }, resizeX: { type: Boolean, default: false }, selectedDate: { type: [String, Date], default: '' }, showAllDayEvents: { type: [Boolean, String], default: false }, showWeekNumbers: { type: [Boolean, String], default: false }, snapToTime: { type: Number, default: 0 }, small: { type: Boolean, default: false }, specialHours: { type: Object, default: () => ({}) }, splitDays: { type: Array, default: () => [] }, startWeekOnSunday: { type: Boolean, default: false }, stickySplitLabels: { type: Boolean, default: false }, time: { type: Boolean, default: true }, timeCellHeight: { type: Number, default: 40 }, // In pixels. timeFormat: { type: String, default: '' }, timeFrom: { type: Number, default: 0 }, // In minutes. timeStep: { type: Number, default: 60 }, // In minutes. timeTo: { type: Number, default: minutesInADay }, // In minutes. todayButton: { type: Boolean, default: false }, transitions: { type: Boolean, default: true }, twelveHour: { type: Boolean, default: false }, watchRealTime: { type: Boolean, default: false }, // Expensive, so only trigger on demand. xsmall: { type: Boolean, default: false }
Preview:
Changelog:
v4.8.1 (10/23/2022)
- update
v4.7.o (08/30/2022)
- cleanup
v4.6.o (08/29/2022)
- Update
v4.5.o (08/28/2022)
- Update
v4.4.o (08/27/2022)
- Update
v4.3.4 (07/28/2022)
- Fix the router base URL.
Download Details:
Author: antoniandre
Live Demo: https://antoniandre.github.io/vue-cal/
Download Link: https://github.com/antoniandre/vue-cal/archive/refs/heads/master.zip
Official Website: https://github.com/antoniandre/vue-cal
Install & Download:
# VUE 2
$ npm i vue-cal
# VUE 3
$ npm i vue-cal@next