Assiging different behaviors and styles to different events

Scheduler Javascript
#1

I would like to assign different behaviors and different styles to an event depending on the type of event.

For example if there were 3 or more different events:

RestrictedEvents
UnrestrictedEvents
WildandCrazyEvents

And each needed to have different colors, different widths, and they also needed different behaviors, such as “no collision rule” for one and “collision allowed” for another etc. What is the best way to go about this.

Any tips appreciated

#2

Styles
samples\02_customization\01_events_coloring.html

Custom css classes can be assigned to events , through templates. And by using custom classes you can change styling of events as you wish.

different widths
Not quite sure what do you mean , but most probably it is not possible - most sizes are calculated based on settings of scheduler - so they will be equal for all events.

different behaviors
Can’t be done by API, but you can check sources/ext/ext_collision.js - and adjust function which check’s collisions, by adding logic which separate events by your rules. ( collision detection code is pretty simple and based on documented API )

#3

Much thanks. :smiley:

Also curious where I can find the part of the scheduler that is responsible for aligning and stacking the the event layers visually left to right when they share a time period? I would like to be able to create a left to right order by event type instead of the event entry order if possible.

#4

scheduler._pre_render_events_line=function(evs,hold){ evs.sort(function(a,b){ return a.start_date>b.start_date?1:-1; });

the order of evs - the order in which events will be rendered ( some logic depends on time based ordering , so changing those lines may be not safe )