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

Pro Tutorials

  • Vue Scheduler with Vertical Timeline
    How to use the Vue Calendar component to create a scheduler UI with a vertical timeline and resources displayed as columns. Configure advanced features, such as responsive layout, column groups, and content customization using Vue templates.

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>