New to Telerik UI for ASP.NET Core? Download free 30-day trial

More Comprehensive Month Events in Scheduler Adaptive Rendering


Product Version 2023.3.1114
Product Telerik UI for ASP.NET Core Scheduler


I am using Adaptive Rendering mode for the Scheduler in Month View. The users need to interact with the events that are represented by dots in the event slots. How can I achieve that?


  1. Subscribe to the DataBound Event of the Scheduler
  2. In the onDataBound JavaScript handler, subscribe to the click event over the .k-event elements. These elements represent the event dots. Then, within the click event handler, use the occurrenceByUid() method to get the item, and save it into a global variable.

        var schedulerEvent;
        function onDataBound(e){
            var scheduler = e.sender;
            var view = e.sender.viewName();      
                $(".k-event").off().on("click", function(ev){
                    var uid = $(ev.currentTarget).attr("data-uid");
                    var event = scheduler.occurrenceByUid(uid);
                    schedulerEvent = event;
  3. Initialize a Tooltip component and use the schedulerEvent global variable to populate its content with additional information about the event.

  4. (Optionally) Add an Edit Event button in the Tooltip's content. Handle its onclick event and utilize the editEvent() method to start editing the particular Scheduler event.

        function tooltipContent(e){
            var content = `<div>
            <p> ${schedulerEvent.title} </p>
            <p> Start: ${kendo.toString(schedulerEvent.start, "dd/MMM/yyyy hh:mm")} 
                End: ${kendo.toString(schedulerEvent.end, "dd/MMM/yyyy hh:mm")} </p>
            <button onclick="editEvent()"> Edit Event </button>
            return content;
        function editEvent(e){
            var scheduler = $("#scheduler").data("kendoScheduler");

Refer to this Telerik REPL sample that showcases the suggested approach.

More ASP.NET Core Scheduler Resources

See Also

In this article