Vue Event Calendar

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>