vue appointment event calendar component


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

Open-Source Tutorials

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

  <DayPilotCalendar id="dp" :config="config" ref="calendar" />

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;
            if (modal.canceled) {
              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: {
  computed: {
    calendar() {
      return this.$refs.calendar.control;
  methods: {
    loadEvents() {
      // placeholder for an AJAX call
      var data = [
          id: 1,
          text: "Event 1"
          id: 2,
          text: "Event 2"
      this.calendar.update({events: data});
  mounted() {