Home
Date & Time
Full-featured Draggable Event Calendar For Vue 3/2 – vue-cal

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

antoniandre Last Updated: 7 months ago

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:

Full-featured Draggable Event Calendar

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 [email protected]

Related Posts

Tags:,

Add Comment