html5-scheduler-event-multi-selecting.png

Multiple events can be selected.

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

Multi-Select Rectangle

Use MultiSelectRectangle property

Modes:

  • "Disabled" (default)
  • "Free" (free-hand range)
  • "Row" (select events in a single row)

Free Rectangle Selecting

html5-scheduler-event-multi-selecting.png

Row Rectangle Selecting

html5-scheduler-row-rectangle-event-selecting.png

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:

ASP.NET WebForms

Demo:

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