Slot Selection
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.
Built-in Directive
To enable the built-in slot selection, use the kendoSchedulerSlotSelectable directive.
The directive internally handles the slotDragStart, slotDrag, and 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.
The kendoSchedulerSlotSelectable directive also allows programmatic selection through its slotSelection binding. kendoSchedulerSlotSelectable supports both one-way and two-way binding.
Custom Callback
To enable a custom slot selection, use the following configuration:
- Set the
selectableinput of the Scheduler totrue. It is set tofalseby default. - Pass a custom
isSlotSelectedcallback to the Scheduler.
When 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 start and 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.
Creating Events from Selection
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 start and end date.
To provide a visual representation of the newly created event:
- Handle the
slotSelectionChangeto check the selected slots and create the necessaryFormGroup. - Use the
addEventmethod to add the new event.
The following example demonstrates the suggestion in action.
