vue appointment event calendar component

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

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>