Full-featured Draggable Event Calendar For Vue 3/2 - vue-cal

Install & Download:

# VUE 2
$ npm i vue-cal
# VUE 3
$ npm i vue-cal@next

Description:

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 }