Vue Calendar Component (DayPilot)

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:

npm install https://npm.daypilot.org/daypilot-pro-vue/trial/2024.4.6243.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 :config="config" :events="events" ref="calendarRef" />
</template>

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

// Reference to the DayPilotCalendar component
const calendarRef = ref(null)

// Reactive events array
const events = ref([])

// Configuration object for DayPilotCalendar
const config = {
  viewType: "Week",
  startDate: DayPilot.Date.today(),
  onTimeRangeSelected: async (args) => {
    const modal = await DayPilot.Modal.prompt('Create a new event:', 'Event 1')
    if (modal.canceled) {
      return
    }
    const newEvent = {
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      text: modal.result,
    }
    events.value.push(newEvent)
  },
  onEventMoved: (args) => {
    console.log('Event moved')
  },
  onEventResized: (args) => {
    console.log('Event resized')
  },
}

// Function to load events into the calendar
const loadEvents = () => {
  // Placeholder for an HTTP call to fetch events
  events.value = [
    {
      id: 1,
      start: DayPilot.Date.today().addHours(10).toString(),
      end: DayPilot.Date.today().addHours(11).toString(),
      text: 'Event 1',
    },
    {
      id: 2,
      start: DayPilot.Date.today().addHours(13).toString(),
      end: DayPilot.Date.today().addHours(16).toString(),
      text: 'Event 2',
    },
  ]
}

// Lifecycle hook to load events when the component is mounted
onMounted(() => {
  loadEvents()
  console.log('Mounted.')
})
</script>

Vue Templates

Using Vue Templates to Add Icons, Buttons, or Progress Bars to Calendar Events

You can use Vue templates to define custom content of the following Calendar elements:

  • Events

  • Grid cells

  • Column headers (Pro only)

  • Time headers (Pro only)

Example:

<DayPilotCalendar viewType="Week">
  <template #event="{event}">
    {{event.text()}} {{event.start().toString("h:mm tt")}}
  </template>
</DayPilotCalendar>

See also:

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();
    console.log("Events loaded.");
  }
}
</script>