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
- Handle the
DataBound
event of the Scheduler. - Create an array of dates, which must be highlighted within the month view.
- Check if the current view is the month view.
- Select the Scheduler month table with jQuery and loop through the
td
elements. - Get the time slot of the current table cell to access the
startDate
field by using theslotByElement()
method. - Check if the
startDate
matches the dates from the external collection of dates and add a customhighlightedDay
class to the table cell element. -
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: