Create a Scheduler Event from Selected Time Slots

Updated on Mar 20, 2026

Environment

Product	Telerik UI for ASP.NET MVC Scheduler
Product Version	2026.1.212

Description

How can I drag across empty Scheduler slots, keep the selected time range, and then create an appointment from that selection?

Cause

The Scheduler supports selecting slots when Selectable(true) is enabled, but it does not provide a built-in command that creates an event from the current slot selection.

Solution

Enable slot selection in the Scheduler with Selectable(true), store the selected range in the change event, and use a custom button to call addEvent() with that range.

Razor

@(Html.Kendo().Scheduler<MeetingViewModel>()
    .Name("scheduler")
    .Selectable(true)
    .Events(e => e.Change("onSchedulerChange"))
)

<button id="createEventBtn" class="k-button k-button-primary">
    Create Event from Selection
</button>

<script>
    var selectedRange = null;

    function onSchedulerChange(e) {
        selectedRange = {
            start: e.start,
            end: e.end,
            isAllDay: e.slots && e.slots.length && e.slots[0].isAllDay
        };
    }

    $("#createEventBtn").kendoButton({
        themeColor: "primary",
        click: onClick
    });

    function onClick() {
        if (!selectedRange) {
            alert("Please select a time range first.");
            return;
        }

        var scheduler = $("#scheduler").data("kendoScheduler");

        scheduler.addEvent({
            start: selectedRange.start,
            end: selectedRange.end,
            isAllDay: selectedRange.isAllDay,
            title: "New Event",
            OwnerID: getSelectedOwner()
        });
    }
</script>

See Also

• Client-Side API Reference of the Scheduler for ASP.NET MVC

• Server-Side API Reference of the Scheduler for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base