Timeline Event Templates

Hi Guys

Anyone figured out how to multi-line and conditionally colored events in TIMELINE view.

I found the documentation here, but it doesn’t really help much: docs.dhtmlx.com/scheduler/timeli … lates.html

These are a few things I’d like to do in Timeline view and I don’t see a way to do it

  1. Display other data than start and end date and text in the event. I have 7 fields in my data (JobNo, Title, Customer, Qty, etc. and I’d like to display these in multiple rows in the event (loaded from XML)

  2. Set the color/class based on some data in the event (job type: provisional, confirmed, overtime. etc.)



you can add a class to the event based on some property:
docs.dhtmlx.com/scheduler/api__s … plate.html
or add a property “color” in hex/rgb format.

You can add any custom property to the event object in the scheduler, please see examples:
docs.dhtmlx.com/scheduler/loadin … properties

Thanks. I know how to use a condition calls. The problem is the data I’m displaying can have ANY color (stored in afield called “color”), so I can’t do

scheduler.templates.event_class = function(start, end, event) {

			case "#FF0000":
			return "red"

			case "#00FF00":
			return "green"

I’d like to set the color based on the value of the .color field

Maybe the second part of post is the way to do it, but I don’t see it



You can add a simple check before “switch”, for ex.:

var color = event.color || ""; switch(color){ case "#FF0000": ... default: return "grey"; }

Thanks Serge

I must be missing something, isn’t this still “select a css class based on the event.color property”? If so, it will still requires a CSS class for every possible color (16 million) wouldn’t it?



if your events can have a lot of different color values, you can assign color values to a ‘color’ and ‘textColor’ of an event object:event.color = "#FF0000"; event.textColor = "#FFFFFF";
However, usually calendar uses a certain limited subset of colors, mostly because user have no way to understand what every possible shade could mean.
If you have limited amount of event categories, that go with different styling, you can define css rules for each event kind. If some styles are taken from the database e.g. color of an each event type, you can either use properties of event(only background and text color are supported), or generate css dinamically.


you’re right, a user isn’t going to use dozes of colors, but I have no way of knowing which handful they will select.

do you have an example of how to generate css dynamically?