Features
Vue Event Calendar is a UI component that you can use to add scheduling features to your application.
- Daily calendar view which displays a single day - time of day is displayed on the vertical axis
- You can switch to week or work week view. The work week calendar view hides weekends.
- Easily create, resize and move appointments using drag and drop.
- Users can delete appointments using a built-in icon.
- The calendar displays custom business hours (by default business hours are set to 9am - 5pm).
- The current viewport displays business hours, you can use a vertical scrollbar to reach the remaining hours.
- The calendar component support internationalization - set the locale and the component will use it to format the dates and times.
- Change the visible date using a date picker.
- Resource calendar that can display resources as columns instead of days.
Selected advanced features of the Pro version:
- Support for large data sets with lazy rendering of appointments during scrolling
- Horizontal scrollbar allows displaying a large number of columns (with days or resources) with a fixed width.
- Schedule overnight shifts with days starting at the specified hour. The calendar displays 24 hours that spans two days (like a TV schedule).
- You can export the calendar view to a PDF document, or a JPEG/PNG/BMP image.
- Support touch devices (iPad, iPhone, Android)
- The resource calendar columns can be organization in a hierarchy.
For a timeline scheduler view that allows scheduling events for multiple resources, see the Vue Scheduler component.
Vue Calendar Package
DayPilot Lite (Open-Source)
The DayPilot Lite for Vue package is available at @daypilot/daypilot-lite-vue.
npm install @daypilot/daypilot-lite-vue
DayPilot Pro
You can install the daypilot-pro-vue package using a link from npm.daypilot.org.
Open-Source Tutorials
- Vue.js Weekly Calendar Tutorial (Open-Source)
How to create a weekly calendar web application using a Vue calendar component. Learn how to load appointment data, create new appointments and customize the appearance using CSS. - Vue Date Picker with Free/Busy Highlighting (Open-Source)
How to add a Vue date picker component to your application and link it to the main calendar component. You can use the date picker to highlight busy days. - Vue Resource Calendar (Open-Source)
The resource calendar lets you schedule events/tasks for multiple resources (locations, rooms, cars, tools) displayed as columns.
Online Configurator
You can use Calendar UI Builder to configure the Vue.js Calendar component and generate a downloadable Vue.js project.
Quick Vue Calendar Example
<template> <DayPilotCalendar id="dp" :config="config" ref="calendar" /> </template> <script> import {DayPilot, DayPilotCalendar} from 'daypilot-pro-vue' export default { name: 'Calendar', data: function() { return { config: { viewType: "Week", onTimeRangeSelected: (args) => { DayPilot.Modal.prompt("Create a new event:", "Event 1").then((modal) => { var dp = args.control; dp.clearSelection(); if (modal.canceled) { return; } dp.events.add({ start: args.start, end: args.end, id: DayPilot.guid(), text: modal.result }); }); }, eventDeleteHandling: "Disabled", onEventMoved: () => { this.message("Event moved"); }, onEventResized: () => { this.message("Event resized"); }, }, } }, components: { DayPilotCalendar }, computed: { calendar() { return this.$refs.calendar.control; } }, methods: { loadEvents() { // placeholder for an AJAX call var data = [ { id: 1, start: DayPilot.Date.today().addHours(10), end: DayPilot.Date.today().addHours(11), text: "Event 1" }, { id: 2, start: DayPilot.Date.today().addHours(13), end: DayPilot.Date.today().addHours(16), text: "Event 2" } ]; this.calendar.update({events: data}); }, }, mounted() { this.loadEvents(); this.calendar.message("Welcome!"); } } </script>