vue scheduler component

Online Configurator

You can use Scheduler UI Builder to configure the Vue Scheduler component and generate a downloadable Vue.js project.

Vue Scheduler Tutorials

  • Vue Scheduler: Build a Reservation Application in 5 Minutes
    This tutorial explains how to start using the Vue Scheduler in your own application. It explains how to install and configure the component and load data.

  • Vue Scheduler Quick Start Tutorial
    A quick start project that includes all the required boilerplate code. Download this project and start playing with the Vue Scheduler component.

  • Queue of Unscheduled Tasks
    How to display a queue of unassigned tasks next to the Vue Scheduler. Users can move the unscheduled tasks to the Scheduler (and back) using drag and drop.

  • How to Display Holidays
    How to highlight global and resources-specific holidays in the Vue Scheduler. You can also disable the holiday cells for drag and drop operations.

  • On-Demain Event Loading
    How to improve performance by loading only the events for the current viewport. This feature will enable almost unlimited linear scalability.

  • Availability/Utilization Histogram
    How to add special frozen rows to the top of the Vue Scheduler and display a time slot utilization histogram.

Vue Scheduler Component

The Vue Scheduler component is included in DayPilot Pro for JavaScript package.

How to install the Vue Scheduler component?

You need to install the daypilot-pro-vue package from npm.daypilot.org.

Example (make sure you use the latest version):

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

How to add the Vue Scheduler to your application?

To add the Vue Scheduler to your application, you need to import DayPilotScheduler in the components section:

  components: {
    DayPilotScheduler
  },

Then you can add the <DayPilotScheduler> tag to the template:

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
</template>

How to configure the Scheduler?

You can use the :config attribute to point the Scheduler to a config object.

<DayPilotScheduler id="dp" :config="config" />

The config object specifies the Scheduler properties and event handlers.

config: {
  timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
  scale: "Day",
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  treeEnabled: true,
},

Vue Scheduler Component Example (Composition API)

This example shows how to use the Vue Scheduler with Composition API.

The key parts:

  • To use the direct API, you will need a reference to the underlying DayPilot.Scheduler object. You can get it using the ref attribute.

  • For read-only config you can use a plain object. If you want Vue to watch config object changes, it has to be activated using reactive().

  • You need to return the scheduler and config objects in the setup() function.

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler"/>
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'
import {onMounted, reactive, ref} from 'vue';

export default {
  components: {
    DayPilotScheduler
  },
  setup() {
    const scheduler = ref(null);
    const config = reactive({
      timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
      scale: "Day",
      days: DayPilot.Date.today().daysInMonth(),
      startDate: DayPilot.Date.today().firstDayOfMonth(),
      timeRangeSelectedHandling: "Enabled",
      onTimeRangeSelected: async (args) => {
        const dp = args.control;
        const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
        dp.clearSelection();
        if (modal.canceled) {
          return;
        }
        dp.events.add({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          resource: args.resource,
          text: modal.result
        });
      },
    });

    onMounted(() => {
      loadResources();
      loadEvents();

      scheduler.value.control.message("Welcome!");
    });

    function loadResources() {
      const resources = [
        {name: "Resource 1", id: "R1"},
        {name: "Resource 2", id: "R2"},
        {name: "Resource 3", id: "R3"}
      ];
      config.resources = resources;
    }

    function loadEvents() {
      const events = [
        // { id: 1, start: "2021-10-01T00:00:00", end: "2021-10-05T00:00:00", text: "Event 1", resource: "R1" },
        {
          id: 2,
          start: DayPilot.Date.today().addDays(2),
          end: DayPilot.Date.today().addDays(5),
          text: "Event 1",
          resource: "R2"
        }
      ];
      config.events = events;
    }

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

Vue Scheduler Component Example (Options API)

The following example shows a Scheduler component that uses <DayPilotScheduler> to create an instance of the Vue Scheduler using the Vue Options API.

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
        scale: "Day",
        days: DayPilot.Date.today().daysInMonth(),
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        timeRangeSelectedHandling: "Enabled",
        onTimeRangeSelected: async (args) => {
          const dp = args.control;
          const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
          dp.clearSelection();
          if (modal.canceled) { return; }
          dp.events.add({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            resource: args.resource,
            text: modal.result
          });
        },
        eventMoveHandling: "Update",
        onEventMoved: (args) => {
          args.control.message("Event moved: " + args.e.text());
        },
        eventResizeHandling: "Update",
        onEventResized: (args) => {
          args.control.message("Event resized: " + args.e.text());
        },
        eventDeleteHandling: "Update",
        onEventDeleted: (args) => {
          args.control.message("Event deleted: " + args.e.text());
        },
        eventClickHandling: "Disabled",
        treeEnabled: true,
      },
    }
  },
  props: {
  },
  components: {
    DayPilotScheduler
  },
  computed: {
    // DayPilot.Scheduler object - https://api.daypilot.org/daypilot-scheduler-class/
    scheduler: function () {
      return this.$refs.scheduler.control;
    }
  },
  methods: {
    loadEvents() {
      const events = [
        { id: 1, start: "2021-10-01T00:00:00", end: "2021-10-05T00:00:00", text: "Event 1", resource: "R1" },
      ];
      this.config.events = events;
    },
    loadResources() {
      const resources = [
        {name: "Resource 1", id: "R1"},
        {name: "Resource 2", id: "R2"},
        {name: "Resource 3", id: "R3"}
      ];
      this.config.resources = resources;
    }
  },
  mounted: function() {
    this.loadResources();
    this.loadEvents();

    this.scheduler.message("Welcome!");
  }
}
</script>