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.

yarn add @daypilot/daypilot-lite-vue

DayPilot Pro

You can install the daypilot-pro-vue package using a link from npm.daypilot.org:

yarn add https://npm.daypilot.org/daypilot-pro-vue/trial/2023.2.5565.tar.gz

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.

Vue Calendar Example (Composition API)

This example shows how to create a calendar component using the Vue Composition API and the open-source @daypilot/daypilot-lite-vue package. The calendar component displays a weekly view, and users can create, move, and resize events. This example can be used as a starting point for implementing more advanced features, such as fetching events from a server or saving changes to a database.

<template>
  <DayPilotCalendar id="dp" :config="config" ref="calendarRef" />
</template>

<script>
import {DayPilot, DayPilotCalendar} from '@daypilot/daypilot-lite-vue'
import {onMounted, ref} from "vue";

export default {
  name: 'WeeklyCalendar',
  props: {
  },
  components: {
    DayPilotCalendar
  },
  setup() {
    const calendarRef = ref(null);

    const config = {
      viewType: "Week",
      startDate: DayPilot.Date.today(),
      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: () => {
        console.log('Event moved');
      },
      onEventResized: () => {
        console.log('Event resized');
      },
    };

    const loadEvents = () => {
      // placeholder for an HTTP 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',
        },
      ];
      calendarRef.value.control.update({ events: data });
    };

    onMounted(() => {
      loadEvents();
      console.log('Mounted.');
    });

    return {
      config,
      calendarRef
    };
  }
}
</script>

Vue Calendar Example (Options API)

This example creates a calendar component using the traditional Vue Options API and the daypilot-pro-vue package. The component features a calendar with a weekly view, where users have the ability to create, move, and resize events. You can use the event handlers (onEventMove, onEventResized, onTimeRangeSelected) to notify the server-side backend about the changes made by the user.

<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) => {
            const 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.calendar.message("Event moved");
        },
        onEventResized: () => {
          this.calendar.message("Event resized");
        },
      },
    }
  },
  components: {
    DayPilotCalendar
  },
  computed: {
    calendar() {
      return this.$refs.calendar.control;
    }
  },
  methods: {
    loadEvents() {
      // placeholder for an HTTP call
      const 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>