Set Different Colors for Every Working Day in Scheduler Week View
Environment
Product | Scheduler for Progress® Kendo UI® |
Description
I want to set different colors for the working hours on each day in the Week View.
This KB article also answers the following questions:
- How can I customize the background color of Scheduler days based on dynamic conditions?
- Is it possible to set different background colors for each day in the Week view in the Kendo UI Scheduler?
Solution
To customize the background color of Scheduler days based on working hours, you can use the .k-scheduler-content td:not(.k-nonwork-hour)
selector.
For different colors each day, use the slotTemplate
option in the Scheduler's configuration. This allows adding a different class based on the day rendered:
{
type: "week",
selected: true,
slotTemplate: function(data){
let currentDay = data.date.getDay();
let myclass;
switch(currentDay) {
case 1:
myclass = 'monday';
break;
case 2:
myclass = 'tuesday';
break;
// Add more cases for other days
default:
myclass = 'custom';
break;
}
return `<span class=${myclass}></span>`;
}
}
Then, style the slots with different colors in the dataBound
event handler:
dataBound: function(e){
if(e.sender.viewName() == 'week'){
$('.monday').parent('td:not(.k-nonwork-hour)').css('background-color', 'lightyellow');
$('.tuesday').parent('td:not(.k-nonwork-hour)').css('background-color', 'orange');
// Style other days similarly
} else{
$('.k-scheduler-content td:not(.k-nonwork-hour)').css('background-color', 'defaultColor');
}
}
This approach allows you to dynamically set different background color for each day in Week view in the Scheduler slots based on the working hours.
Below is a runnable example:
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
views: [
"day",
"timelineWeek",
"month",
{
type: "week",
selected: true,
slotTemplate: function(data){
let currentDay = data.date.getDay();
let myclass;
switch(currentDay) {
case 1:
myclass = 'monday';
break;
case 2:
myclass = 'tuesday'
break;
case 3:
myclass = 'wednesday'
break;
case 4:
myclass = 'thirsday'
break;
case 5:
myclass = 'friday'
break;
default:
myclass = 'custom'
break;
}
return `<span class=${myclass}></span>`
}
},
"agenda"
],
dataBound: function(e){
if(e.sender.viewName() == 'week'){
$('.monday').parent('td:not(.k-nonwork-hour)').css('background-color', 'lightyellow')
$('.tuesday').parent('td:not(.k-nonwork-hour)').css('background-color', 'orange')
$('.wednesday').parent('td:not(.k-nonwork-hour)').css('background-color', 'violet')
$('.thirsday').parent('td:not(.k-nonwork-hour)').css('background-color', 'lightblue')
$('.friday').parent('td:not(.k-nonwork-hour)').css('background-color', 'lightgreen')
} else{
$('.k-scheduler-content td:not(.k-nonwork-hour)').css('background-color', 'lightyellow')
}
},
startTime: new Date("2013/1/1 08:00"),
workDayStart: new Date("2013/1/1 11:00"),
workDayEnd: new Date("2013/1/1 14:00"),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
</script>