Event Multi-Selecting

The Scheduler component supports selecting multiple events.

• Individual events can be selected or deselected using Ctrl+click (enabled by default, requires eventClickHandling="Select").

• Multiple events can be selected using Shift+mouse drag using a rectangle selection (needs to be enabled using multiSelectRectangle property).

• You can select multiple items programmatically using the selection API (multiselect.add() method).

Select Multiple Events using Ctrl+Click

To enable selection of events using Ctrl+click, you need to set the default event click action (eventClickHandling) to "Select" and enable multi-selection using allowMultiSelect property.

Scheduler config:

{
  eventClickHandling: "Select",
  allowMultiSelect: true,
  // ...
}

To override the default event click behavior, you can use a custom onEventClick event handler. This will let you handle a simple click using another action (e.g. opening a modal dialog with) and combine it with Ctrl+click handler that adds the event to the selection.

{
  eventClickHandling: "Enabled",
  onEventClick: async args => {
    if (args.ctrl) {
      dp.multiselect.add(args.e);
    }
    else {
      const modal = await DayPilot.Modal.prompt("Edit event name", args.e.data.text);
      if (modal.canceled) {
        return;
      }
      args.e.data.text = modal.result;
      dp.events.update(args.e);
    }
  },
  // ...
}

Rectangle Selection

To select several events in multiple rows at once, you can use the rectangle selection.

This feature lets you create a free-hand selection across several adjacent rows and select all events that overlap with it.

JavaScript

Enable free-hand rectangle selecting:

dp.rectangleSelectHandling = "EventSelect";

Real-time event handler:

dp.onRectangleEventSelecting = function(args) {
  var msg = args.events.map(function(item) { return item.text(); }).join(" ");
  $("#msg").html(msg);
};

Append the events to the existing selection:

dp.onRectangleEventSelect = function(args) {
  args.append = true;
};

Demo:

• http://javascript.daypilot.org/demo/scheduler/eventmultiselecting.html

Tutorial

• JavaScript Scheduler: Copy Multiple Events