Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jerry T. on Dec 30, 2009 09:40
open dhtmlx forum
Scheduler - How to set background color of current date in Week view?

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?
Answer posted by Alex (support) on Jan 04, 2010 03:11

You can use templates to do that:

<style>

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

</style>

...

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.


Answer posted on Jan 04, 2010 08:10
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.

Answer posted by Alex (support) on Jan 05, 2010 02:15

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 "<div style='height:100%;background-color:red'>"+format(date)+"</div>";
  return format(date);
}

Answer posted on Jan 05, 2010 05:51

Ah!  That got it!

Many thanks, Alex!