How to highlight the current day of the JavaScript Scheduler?
This article explains how to highlight the work cells of the current date in JS Scheduler.
Highlight work cells
Refer to the following steps to achieve this:
Step 1: Initialize the JS scheduler by binding the renderCell event as shown in the following code snippet.
var scheduleObj = new ej.schedule.Schedule({
width: '100%',
height: '650px',
renderCell: function (args) {
…
}
});
scheduleObj.appendTo('#Schedule');
Step 2: Bind the renderCell event to include the dynamic class name as "current-date" for the current date work-cell elements, as shown in the following code snippet.
renderCell: function (args) {
if ((args.elementType === "monthCells" || args.elementType === "workCells") && args.date) {
var cellDate = new Date(args.date.getTime());
var date = new Date(cellDate.setHours(0, 0, 0));
if (date.getTime() === new Date().setHours(0, 0, 0, 0)) {
args.element.classList.add('current-date');
}
}
}
Step 3: Kindly apply your required background color for the dynamic class as shown in the following code snippet.
<style>
.current-date {
background-color: #e0e0e0 !important;
}
</style>
Step 4: Run the sample.
You can see the Scheduler with a highlighted background on the work cells of the current date in the following output image.
Figure 1: Output Image of the JavaScript Scheduler
Refer to the example from the following GitHub link:
