More Comprehensive Month Events in Scheduler Adaptive Rendering

Environment

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

Description

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?

Solution

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 kendo.data.SchedulerEvent item, and save it into a global variable.

       var schedulerEvent;
       function onDataBound(e){
           var scheduler = e.sender;
           var view = e.sender.viewName();      
   
           if(view="month"){
               $(".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.

       @(Html.Kendo().Tooltip()
           .For("#scheduler")
           .Filter(".k-event")
           .ShowOn(TooltipShowOnEvent.Click)
           .Position(TooltipPosition.Bottom)
           .Width(120)
           .ContentHandler("tooltipContent")
       )
   

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>
           </div>`;
           return content;
   
       }
       function editEvent(e){
           var scheduler = $("#scheduler").data("kendoScheduler");
           scheduler.editEvent(schedulerEvent);
           $("#scheduler").data("kendoTooltip").hide();
       }
   

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

More ASP.NET Core Scheduler Resources

• ASP.NET Core Scheduler Documentation

• ASP.NET Core Scheduler Demos

• ASP.NET Core Scheduler Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Scheduler for ASP.NET Core
• Server-Side API Reference of the Scheduler for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base