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

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.

        @(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"))
            ...
        )
    
        @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>
    
        <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 following REPL samples:

More ASP.NET Core Scheduler Resources

See Also

In this article