Column specific event.

[Dofarian]

Hey , Thanks for this awesome calendar ! I have a Taxi calendar app with 3 taxis available. The availability of each of the taxis is displayed on the calendar day view. Each of the 3 taxis is displayed in different colors.

The taxis are listed in order of colors on the day view page. For example , if Taxi 1 is red, taxi 2 is green, taxi 3 is yellow.The day view page would show the red event first, then the green event then the yellow event. However, if for instance, Taxi 1 is not available, taxi 2 and 3 are shown only. How can i have the green events under the green column (Taxi 2). Yellow under yellow and red under red. (each taxi have his own column).

Is there a way to accomplish this ? If not, do you have an idea on how to accomplish this ?

[twinssbc]

@Dofarian To display each event in different color is easy, you can use dayviewNormalEventTemplateUrl option to customize the css styles applied to the event. The tricky part is you want to stick one event in a particular column. The calendar calculate the event width by dividing total event number in this timeslot. I think one way is you always pass three events to the calendar, but set the background of the unavailable event to transparent. For example, Case 1: all three taxis are available, then simply pass three events to the calendar, and apply different color on different taxi (you can pass an extra field to distinguish the event, then use ng-class to set different class) Case 2: Taxi1 is not available, but Taxi2 and 3 are available, still pass three events, but make the background of the first event transparent