Event color customizing without defining CSS

Scheduler Javascript
#1

Hi,

I’m looking for how can i change the color of an event, and I’m seeing in the doc that i have to define a css class for each color i want and load it with scheduler.templates.event_class. The problem is that in my case, my datas have a custom field with the hex color code, and so it can be any color, and it’s not possible to create a class for each color i find (atleast 30)…

Is there an easier way to set the event color, like after loading event, setting event.color = red or anything… ?

If i’ve missed a post or a doc already existing, i’m sorry, else thanks a lot !

#2

Unfortunately there is no direct mapping for color property of event.
Currently the only way to achieve such mapping is the custom code modification.

Next feature is not documented one, and probably will not work for all modes as well as may be not supported in next versions

event._text_style - value of this property will be added to the style string of event.

so you can set it ( from onEventLoading handler for example ) with necessary styling.

By the way - it possible to create css classes dynamically, similar to samples\02_customization\01_events_coloring.html - so any count of colors can be supported through css classes.

#3

Thanks for your reply !

If i’ve understood well, i’m trying to use your property like this :

scheduler.attachEvent("onEventLoading",function(event_object){											event_object._text_style="color:pink;";
});

But my data doesn’t load anymore… So i’m looking to this possibility :

  1. Get all my colors in my data and stock it into an array
  2. For each colors, create a css rule as you proposed me earlier
  3. Apply rules to all events.
#4

The code which you are using is correct, just need a small addition

scheduler.attachEvent("onEventLoading",function(event_object){
    event_object._text_style="color:pink;";
    return true; //need to be added
});
#5

Ok i added this code and works only in month view, which does not change event color on others views, especially on week one. I’m going to try to add dynamically css class from an array of colors…

Thanks for your reply

#6

In case of week and day week, the style is set on top level container, while default css rules defines color for inner elements, which overrides your styling.

Basically you can remove from dhtmlxscheduler.css default color values , but it still not very reliable solution.

#7

Ok, the “create rule per color data” method works fine… in week and day view.
I’m looking at the doc, but the month screenshot is missing…

Is “scheduler.template.month_date_class” supposed to customize the event background ?
i actually do this :

scheduler.templates.month_date_class=function(start,end,event){ return "color_"+event.color; }

But it does not seem to work :s

#8

Value returned from month_date_class will be assigned to the day cell in month view ( it colors layout not events )

Check samples/02_customization/04_month_days_coloring.html