The Scheduler enables the user to choose time and day slots, and to select time ranges by clicking and dragging over a set of slots.
Slot selection is available for all Scheduler views except for the
Agenda view as it displays events and only allows the user to select them.
To enable the built-in slot selection, use the
The directive internally handles the
slotDragEnd events of the Scheduler and manages the selection automatically. The directive emits a
slotSelectionChange event when a new selection is made through user interaction.
To enable a custom slot selection, use the following configuration:
- Set the
selectableinput of the Scheduler to
true. It is set to
- Pass a custom
isSlotSelectedcallback to the Scheduler.
selectable is set to
true, the Scheduler component will emit the following events:
slotDragStart—Fires when a mouse drag is initiated.
slotDrag—Fires when the user is dragging over slots.
slotDragEnd—Fires when the drag is over.
You can use these events to obtain the
end of the selection. The user-defined
isSlotSelected callback is executed for every slot in the view. If the function returns
true for a given slot, the slot will be visually styled as selected.
You can create new events inside the Scheduler by dragging the cursor through the slots. This provides better visual indication of where the event will be created and automatically set its
To provide a visual representation of the newly created event:
- Handle the
slotSelectionChangeto check the selected slots and create the necessary
- Use the
addEventmethod to add the new event.
The following example demonstrates the suggestion in action.