# More Comprehensive Month Events in Scheduler Adaptive Rendering

## Environment

<table>
    <tbody>
        <tr>
            <td>Product Version</td>
            <td>2023.3.1114</td>
        </tr>
        <tr>
            <td>Product</td>
            <td>Telerik UI for ASP.NET Core Scheduler</td>
        </tr>
    </tbody>
</table>

## 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](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/schedulereventbuilder#databoundsystemstring) 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()`](https://docs.telerik.com/kendo-ui/api/ui/scheduler/methods/occurrencebyuid) method to get the [kendo.data.SchedulerEvent](https://docs.telerik.com/kendo-ui/api/data/schedulerevent) item, and save it into a global variable.

   ```JavaScript
       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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/overview) component and use the **schedulerEvent** global variable to populate its content with additional information about the event.

   ```Razor HtmlHelper
       @(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()`](https://docs.telerik.com/kendo-ui/api/ui/scheduler/methods/editevent) method to start editing the particular Scheduler event.

   ```JavaScript
       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](https://netcorerepl.telerik.com/QRPFmsPf10mKzlqK18) that showcases the suggested approach.

## More ASP.NET Core Scheduler Resources

* [ASP.NET Core Scheduler Documentation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/scheduling/scheduler/overview)

* [ASP.NET Core Scheduler Demos](https://demos.telerik.com/aspnet-core/scheduler/index)

* [ASP.NET Core Scheduler Product Page](https://www.telerik.com/aspnet-core-ui/scheduler)

* [Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)](https://www.telerik.com/aspnet-core-ui/documentation/getting-started/video-onboarding)

* [Telerik UI for ASP.NET Core Forums](https://www.telerik.com/forums/aspnet-core-ui)

## See Also

* [Client-Side API Reference of the Scheduler for ASP.NET Core](https://docs.telerik.com/kendo-ui/api/ui/scheduler)
* [Server-Side API Reference of the Scheduler for ASP.NET Core](https://docs.telerik.com/aspnet-core/api/scheduler)
* [Telerik UI for ASP.NET Core Breaking Changes](https://www.telerik.com/aspnet-core-ui/documentation/backwards-compatibility/2023-backwards-compatibility)
* [Telerik UI for ASP.NET Core Knowledge Base](https://docs.telerik.com/aspnet-core/knowledge-base)