Dynamically Highlighting Specified Dates within the Month View of the Scheduler

Environment

Product	Telerik UI for ASP.NET MVC Scheduler
Progress Telerik UI for ASP.NET MVC 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.

       @(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"))
           ...
       )
   

       <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>
   

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

For a runnable example based on the code above, refer to the REPL example on highlighting specified dates within the Scheduler month view.

More ASP.NET MVC Scheduler Resources

• ASP.NET MVC Scheduler Documentation

• ASP.NET MVC Scheduler Demos

• ASP.NET MVC Scheduler Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Scheduler for ASP.NET MVC

• Server-Side API Reference of the Scheduler for ASP.NET MVC

• Telerik UI for ASP.NET MVC Breaking Changes

• Telerik UI for ASP.NET MVC Knowledge Base