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).
-
For more details on working with selected events, please see the Event Selecting topic.
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) {
dp.multiselect.add(args.e);
}
else {
const modal = await DayPilot.Modal.prompt("Edit event name", args.e.data.text);
if (modal.canceled) {
return;
}
args.e.data.text = modal.result;
dp.events.update(args.e);
}
},
// ...
}
Rectangle Selection
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.
To enable free-hand rectangle selection and set the default action to select underlying events, use the rectangleSelectHandling property in the config:
{
rectangleSelectHandling: "EventSelect",
// ...
}
To handle rectangle selection changes in real time, you can use the onRectangleSelecting event handler:
{
onRectangleSelecting: (args) => {
const msg = args.events.map(item => item.text()).join(" ");
console.log(msg);
},
// ...
}
To append the events selected using a rectangle to the existing selection, set args.append
to true
in onRectangleSelect:
{
onRectangleSelect: (args) => {
args.append = true;
}
// ...
}