Different color for each event on Calendar

I have a question regarding coloring for different event.

For my implementation, I am only using the tool for displaying data only. No add or modify on the front end. All data comes from the database and I am just using the addEvent API directly on the jsp page due to the small amount of data.

Is there any way that I can display the event with a different color, depending on the group of event?

For example, for events happening in department A, I would like to display it in red.
For events happening in department B, I would like to display it in green.

It can be done through event_class template

docs.dhtmlx.com/doku.php?id=dhtm … appearance

can someone help me on understanding the following function?

if (start < (new Date())) //if date in past
return “past_event”; //then set special css class for it

How does it know the start and end date?

For my calendar that I am trying to implement, I would like to add an extra parameter in my addEvent:


Then I would like to have a function where it would check the color string from the addEvent function, for example:

if (color == “red”) //if color matches
return “red”; //then set special css class for it

then in my css:

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

background-color:Pink !important;
color:white !important;

color:Pin !important;


During rendering, this function will be called against EACH event, so it will take start and end parameters from the each event, one by one, and apply class to them when necessary.


Probably you mean

scheduler.addEvent({ start_date:some, end_date:some, text:some, color:color_here }) ... scheduler.templates.event_class=function(start,end,ev){ if (ev.color == "red") //if color matches return "red"; //then set special css class for it }