html5 scheduler 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

html5 scheduler event multi selecting

Row Rectangle Selecting

html5 scheduler row rectangle event 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:

Tutorial

ASP.NET WebForms

Demo:

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