Invalid Argument when adding rule to events beyond 4095

Scheduler Javascript
#1

Hi,

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.

Thanks,
Karthick K.

#2

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.

#3

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?

Thanks,
Karthick K

#4

Hello,

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,
Ilya

#5

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.

Thanks,
Karthick K.

#6

Hi Ilya,

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

Thanks,
Karthick K.