License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

TLDR: Skip This Tutorial and Generate a Customized Vue.js Project

You can use the online Scheduler UI Builder application to create a customized Scheduler configuration using a visual configurator with live preview. Generate and download a complete Vue.js project with all dependencies.

We will use "dp" as the Scheduler id. We also specify the initial configuration object using :config attribute. It points to "initConfig" object that we need to add to the Vue.js "data" section. This object will let us set the Scheduler properties and event handlers.

Loading the Data during App Initialization

We will call the loading methods during the Vue.js app initialization:

mounted: function() {
this.loadResources();
this.loadEvents();
}

Reservation Context Menu

In this step, we will add a context menu to the reservations. The context menu will let users change the reservation color and delete it.

The context menu can be defined using contextMenu config property. Users can activate the context menu by right-clicking the reservation.

We will also add an icon to the reservation upper-left corner that will serve as a hint that a context menu is available. The icon can be added by inserting an active area using onBeforeEventRender event handler.