Invalid Argument when adding rule to events beyond 4095


I am using document.styleSheets[0].addRule(rule, rule_text) in onEventLoading method for coloring events. It throws java script error “Invalid Argument”. I googled and came to know from microsoft web site that it can only add rule upto 4095 beyond that it will throw error.
How to overcome this error. I have more than 10,000 events to apply color. help me with this.

Karthick K.

You need to define css rules once per color, and you need not separate css rules for each event.
Just define a list of css rules ( you can do it statically, in separate css file ) and use template to map such css rules to events.

Hi Stanislav,

First of all thank you very much for your reply.I am just following the example event coloring from customization package in dhtmlxschduler.I did not get you. In my application i am getting colorcode for each event from database. So, can you please provide me piece of code to define a list of css rules?

Karthick K


This is really just a sample and in real application I believe there is no need to generate random color and CSS class just for it.

In my application i am getting colorcode for each event from database.

Do you really need to color each event in the random color?

  1. Create several CSS styles, for example:

.event_red { background-color:red !important; color:white !important; } .event_green { background-color:green !important; color:white !important; } .event_blue { background-color:blue !important; color:white !important; } .event_pink { background-color:pink !important; color:white !important; } .event_default { background-color:yellow !important; color:white !important; }
2. Add or assign properties to the events:

scheduler.parse([ { start_date: "2009-06-30 09:00", end_date: "2009-06-30 12:00", text:"Task A-12458", section_id:1, color: 'green'}, { start_date: "2009-06-30 10:00", end_date: "2009-06-30 16:00", text:"Task A-89411", section_id:1, color: 'red'}, { start_date: "2009-06-30 10:00", end_date: "2009-06-30 14:00", text:"Task A-64168", section_id:1, color: 'blue'}, { start_date: "2009-06-30 16:00", end_date: "2009-06-30 17:00", text:"Task A-46598", section_id:1, color: 'pink'}, ]);
3. Add event class template:

scheduler.templates.event_class=function(start,end,event){ return "event_"+(event.color||'default'); };
The point here is to have limited, predefined set of CSS classes and to use them with all events (not to create class for each event).

Best regards,

Hi Ilya,

Thanks for the reply. Yes i have to color each event with the color specified by the user. The user may specify any color when he creates event and i will store the color in the database. When user views the created event, i have to color the event with the same color specified by him during creation.

Karthick K.

Hi Ilya,

Thanks for the code snippet. It works fine. I avoided adding rule in javascript by using the code which you posted.

Karthick K.