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).

• For more details on working with selected events, please see the Event Selecting topic.

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);
    }
  },
  // ...
}

Get the Selected Events

To get an array of selected events, use the multiselect.get() method:

{
  allowMultiSelect: true,
  eventClickHandling: "Select",
  onEventSelected: args => {
    const selected = scheduler.multiselect.get();
    console.log("Selected events", selected);
  }
}

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.

To enable free-hand rectangle selection and set the default action to select underlying events, use the rectangleSelectHandling property in the config:

{
  rectangleSelectHandling: "EventSelect",
  // ...
}

To handle rectangle selection changes in real time, you can use the onRectangleSelecting event handler:

{
  onRectangleSelecting: (args) => {
    const msg = args.events.map(item => item.text()).join(" ");
    console.log(msg);
  },
  // ...
}

To append the events selected using a rectangle to the existing selection, set args.append to true in onRectangleSelect:

{
  onRectangleSelect: (args) => {
    args.append = true;
  }
  // ...
}

Demo

• JavaScript Scheduler Event Multi-Selecting Demo

Tutorials

• JavaScript Scheduler: Copy Multiple Events

• JavaScript Scheduler: Swap Events using Context Menu