Scheduler - How to set background color of current date in W

Is there a way to set the background color of the header of the current date in Week view to a different color in order to highlight it apart from the other days of the week?

You can use templates to do that:

.dhx_cal_event.current_event div{
background-color:purple !important;
color:white !important;

if(scheduler._mode == “week”){
var current_date = new Date();
if ((current_date>,-1,“day”))&&(current_date<,1,“day”))) //if date in past
return “current_event”; //then set special css class for it

Please, see the dhtmlxScheduler/samples/02_customization/06_templates.html sample in the scheduler package.

I have that code in place now but I am seeing nothing happening.

I just want to highlight the current day header in the Week view. I even switched to using this:

scheduler.templates.week_date_class = function(start, end, event) {
    if (scheduler._mode == “week”) {
        var current_date = new Date();
        if ((current_date >, -1, “day”)) && (current_date <, 1, “day”))) //if date in past
            return “current_event”; //then set special css class for it

As that seems to be what goes through the days of the week headers in Week view but I cannot get the current date header to highlight.

There is the week_scale_date template that allows to set template for the headers in week view:

var format ="%D, %F %j");

var today = Date());

scheduler.templates.week_scale_date = function(date){
if(date.valueOf() == today.valueOf()) return “

return format(date);

Ah!  That got it!

Many thanks, Alex!

How to do this in timeline cell view?


You can use timeline_cell_class template, where timeline is the name of your view:

scheduler.templates.timeline_cell_class = function(evs, date, section){ // evs - list of events which will be displayed in this cell // date - date for which cell is displayed // section - object with section's properties(e.g. section.key, section.label) return ""; // css class which will be assigned }
Best regards,

1 Like