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 multi-select rectangle (needs to be enabled using multiSelectRectangle property).

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

Multi-Select Rectangle

To select multiple events using drag and drop (rectangle), use the multiSelectRectangle property:

The Scheduler supports the following rectangle selection modes:

• "Disabled" (default)

• "Free" (free-hand range)

• "Row" (select events in a single row)

Free-Hand Rectangle Selecting

Row Rectangle Selecting

JavaScript

Enable free-hand rectangle selecting:

dp.multiSelectRectangle = "Free";

Real-time event handler:

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

Start selecting on event click:

dp.onEventClick = function(args) {
  dp.multiselect.startRectangle();
};

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

ASP.NET WebForms

Demo:

http://www.daypilot.org/demo/Scheduler/EventMultiSelecting.aspx