Dynamically Highlighting Specified Dates within the Month View of the Scheduler

Environment

Product	Telerik UI for ASP.NET Core Scheduler
Progress Telerik UI for ASP.NET Core version	Created with the 2023.3.1010 version

Description

How can I highlight dynamically specific dates within the Scheduler month view on load?

Solution

1. Handle the DataBound event of the Scheduler.

2. Create an array of dates, which must be highlighted within the month view.

3. Check if the current view is the month view.

4. Select the Scheduler month table with jQuery and loop through the td elements.

5. Get the time slot of the current table cell to access the startDate field by using the slotByElement() method.

6. Check if the startDate matches the dates from the external collection of dates and add a custom highlightedDay class to the table cell element.

7. Add the desired background color to the highlightedDay with CSS.

   Razor

       @(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
           .Name("scheduler")
           .Views(views =>
           {
               views.DayView();
               views.WeekView();
               views.MonthView(mView =>
               {
                   mView.Selected(true);
               });
               views.YearView();
           })
           .Events(ev => ev.DataBound("onDataBound"))
           ...
       )

   Razor

       @addTagHelper *, Kendo.Mvc
   
       <kendo-scheduler name="scheduler" on-data-bound="onDataBound">
           <views>
               <view type="day"></view>
               <view type="week"></view>
               <view type="month" selected="true"></view>
               <view type="year"></view>
           </views>
           <!-- Other configuration -->
       </kendo-scheduler>

   Html

       <script>
           var highlightedDays = [
           {
               "startDate": new Date(2022, 5, 2),
               "endDate": new Date(2022, 5, 4),
           },
           {
               "startDate": new Date(2022, 5, 6),
               "endDate": new Date(2022, 5, 7),
           },
                   {
               "startDate": new Date(2022, 5, 16),
               "endDate": new Date(2022, 5, 17),
           },
                   {
               "startDate": new Date(2022, 5, 20),
               "endDate": new Date(2022, 5, 20),
           },
           {
               "startDate": new Date(2022, 5, 30),
               "endDate": new Date(2022, 5, 30)
           }];
   
           function onDataBound(e) {
               var scheduler = e.sender;
               if(scheduler.viewName() == "month") {
                   setHighlightedDays(scheduler, highlightedDays);
               }
           }
   
           function setHighlightedDays(scheduler, highlightedDays) {
               var monthDaysSlots = $('.k-scheduler-content').find('td'); // Get all month days.
               for(var i = 0; i < monthDaysSlots.length; i++) { // Loop through them.
                   let day_slot = scheduler.slotByElement($(monthDaysSlots[i])); // Get the day slot.
                   let daySlotDateStart = new Date(day_slot.startDate); // Get the "startDate" field.
                   $.each(highlightedDays, function(indx, value) { // Loop through the collection of dates.
                       if((daySlotDateStart >= value["startDate"] && daySlotDateStart <= value["endDate"])){
                           $(monthDaysSlots[i]).addClass("highlightedDay");    
                       }
                   });
               }
           }
       </script>

   Html

       <style>
           .highlightedDay {
               background-color: yellow;
           }
       </style>

For a runnable example based on the code above, refer to the following REPL samples:

• Sample code with the Scheduler HtmlHelper
• Sample code with the Scheduler TagHelper

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

• Server-Side TagHelper 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