Diferent color when i have two events in the same day (Year view)

Scheduler Javascript
#1

Hi, i want to get another color when i have 2 events or more in the same day.

For example:

28/04/2019 (two events): background-color: blue;

I tried this:

                                          if ($("[event_id]").length > 1)
							setTimeout(function () {
									$(".dhx_month_head.dhx_year_event").css({
										"background-color": "blue",
										"color": "white"
									})
								}, 200)
								}

But doesn’t work because it change the color of all events when i have 2 or more in all the calendar not only in the same day.

Thank you

#2

Hi,

There is event_class template to configure the CSS style for the event container
https://docs.dhtmlx.com/scheduler/year_view_templates.html
https://docs.dhtmlx.com/scheduler/api__scheduler_event_class_template.html

You also need to check the current view before setting the class to change the color only in the Year view. Use getState() method for it https://docs.dhtmlx.com/scheduler/api__scheduler_getstate.html

#3

Im using event_class and getState but is not enough.

scheduler.templates.event_class = function (start, end, ev) {

         if(scheduler.getState().mode == "year"){
            
            if (UsuarioSimple == 1) {
              if (ev.estado == 1 )  {
                if ($("div[event_id]").length  >1){
              
              return "dhx_cal_event_line_year_multiple";
            }
                return "dhx_cal_event_line_year_naranja";
              } else if (ev.estado == 2) {
                if ($("div[event_id]").length  >1){
              
              return "dhx_cal_event_line_year_multiple";
            }
               
                return "dhx_cal_event_line_year_verde";
              } else if (ev.estado == 3) {
                if ($("div[event_id]").length  >1){
              
              return "dhx_cal_event_line_year_multiple";
            }
                
                return "dhx_cal_event_line_year_rojo";
            } else {
              return "dhx_cal_event_line_year";
            }
            
            }
            
            
          } 
          

        };

if (ev.estado == 1 ) Defines the color, in this case ev.estado define dhx_cal_event_line_year_naranja.

But for example if in 25/09/2019 i have two events (For Example: Event 1 and Event 2) i want to to change the color and no appear in orange,red or green. When i have 2 events on same day i want dhx_cal_event_line_year_multiple(Changes the color to blue).

The problem is if i have 4 events:

25/09/2019 to 27/09/2019 : 2 events
29/09/2919 to 30/09/2019 : 1 event
01/10/2919 to 05/10/2019 : 1 event

It changes every event to blue when i dont want to, just the days who have 2 events or more.

It Should be:

25/09/2019 to 27/09/2019 : 2 events (blue cell)
29/09/2919 to 30/09/2019 : 1 event (respective color from ev.estado)
01/10/2919 to 05/10/2019 : 1 event (respective color from ev.estado)

#4

Sorry, it was my mistake. event_class template specifies the CSS class that will be applied to all cells according to event duration. By default, they can’t have different colors.

I.e., for example, if you have events with dates

 "start_date": "2019-07-1 10:00", "end_date": "2019-07-4 14:00"
 "start_date": "2019-07-1 14:30", "end_date": "2019-07-1 16:00"

All cells will be highlighted with color for days with multiple events, when 2 events occur on 1/07 and 1 event in the remain days: DHTMLX Snippets
That happens because the second event “stumbles” with the first one on 1/07. That determines the color of all days when the second event happens.

Unfortunately, there is no in-built way to solve your issue.

The only way I can suggest you now is to go through all dates in the year view
calculate the length of the array with events for each day that you can get with getEvents() method
and then apply CSS for the required cells.
To find the cell for the of a certain day, you can use “date” property in div container:

This way can influence the performance of your app.