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

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

See Also

In this article