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:
Tutorial
ASP.NET WebForms
Demo:
http://www.daypilot.org/demo/Scheduler/EventMultiSelecting.aspx