New to Kendo UI for Angular? Start a free 30-day trial

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Callback

To enable a custom slot selection, use the following configuration:

  1. Set the selectable input of the Scheduler to true. It is set to false by default.
  2. Pass a custom isSlotSelected callback to the Scheduler.

When selectable is set to true, the Scheduler component will emit the following events:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?