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;
}








scheduler.templates.event_class=function(start,end,event){
if(scheduler._mode == “week”){
var current_date = new Date();
if ((current_date>scheduler.date.add(start,-1,“day”))&&(current_date<scheduler.date.add(start,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 > scheduler.date.add(start, -1, “day”)) && (current_date < scheduler.date.add(start, 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 = scheduler.date.date_to_str("%D, %F %j");


var today = scheduler.date.date_part(new Date());


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

”+format(date)+"
";
return format(date);
}


Ah!  That got it!



Many thanks, Alex!

How to do this in timeline cell view?
thanks

Hello,

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,
Ilya

1 Like