Scheduler Month View - Change Cell Background By Event Data

Scheduler Javascript
#1

Hey,
I am using the Scheduler with month view, and i need to change background of cells with events by some event property how to do this?

#2

Hi,

if you mean the month calendar cells, you can use month_date_class template:
https://docs.dhtmlx.com/scheduler/api__scheduler_month_date_class_template.html

It’s called for each cell and allows you to add a css class to the whole cell element.
You can inspect events located in a said cell (by getting events by date using scheduler.getEvents(from, to)), and return an appropriate class

scheduler.templates.month_date_class = function(date){
  var events = scheduler.getEvents(date, scheduler.date.add(date, 1, "day"));
  
  if(!events.length){
     console.log(date, "no-events", events, events.length);
     return "no-events"; 
  }else if(events.length <= 2){
    console.log(date, "few-events", events, events.length);
     return "few-events"; 
  }else{
    console.log(date, "many-events", events, events.length);
     return "many-events"; 
  }
  
  return "";
  
}

Demo:
http://snippet.dhtmlx.com/208d10f2e (see the HTML tab for css)

Also, please note, that this template is called only during a complete repaint of the scheduler.
You may need to trigger complete repaints manually:

function refreshMonthLayout(){
   if(scheduler.getState().mode === "month"){
     scheduler.setCurrentView();    
   }
   return true;
}
scheduler.attachEvent("onParse", refreshMonthLayout);
scheduler.attachEvent("onEventChanged", refreshMonthLayout);
scheduler.attachEvent("onEventAdded", refreshMonthLayout);
scheduler.attachEvent("onEventDeleted", refreshMonthLayout);
#3

Thanks for answer but this example not working for me.
I have enterprise license js version: 4.4
If its because i have older version let me know how to get the new version with my enterprise license.
And if the problem is not because the version let me know what can i do.
As i checked on the “month_date_class” event there is no events at all but if i try to console the events in timeout of 100 miliseconds i can see them.
Wating to your answer.

Thanks for helping.

#4

Hi!

can you please try replacing onParse with onXLE?

scheduler.attachEvent("onParse", refreshMonthLayout);

–>

scheduler.attachEvent("onXLE", refreshMonthLayout);

onParse was added in v5.2, dhtmlxscheduler v4.4 didn’t have it. Probably that’s the reason why the sample didn’t work for you.

As for the update to the latest version of the scheduler - can you please drop us an email at contact@dhtmlx.com and be sure to specify your license number and/or an email address you used to obtain the license back then.