javascript scheduler selecting multiple events

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) {
    else {
      const modal = await DayPilot.Modal.prompt("Edit event name",;
      if (modal.canceled) {
      } = modal.result;;
  // ...

Rectangle Selection

javascript scheduler rectangle selection free hand

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.


Enable free-hand rectangle selecting:

dp.rectangleSelectHandling = "EventSelect";

Real-time event handler:

dp.onRectangleEventSelecting = function(args) {
  var msg = { return item.text(); }).join(" ");

Append the events to the existing selection:

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



ASP.NET WebForms