Event Colors in Timeline View

Scheduler Javascript
#1

How do you define the css for the timeline event bars so they can have different colors based on whether the event is complete or not.

Currently use:
scheduler.templates.event_class=function(start,end,event) {
if (event.CompleteDate!=“0000-00-00”)
return “complete_task”;
else
return “”;
}

The css works fine for the event displayed in the calendar view.
What is the css syntax for the timeline bar display?

#2

template must work for all views, in timeline view css rule will look as

.dhx_cal_event_line.complete_task{
… custom rules …
}

If issue still occurs - try to update dhtmlxscheduler_timeline.js with the attached one.
dhtmlxscheduler_timeline.zip (6.82 KB)

#3

Still does not work with updated timeline.js

Do I need to create a seperate class for event_line such as

scheduler.templates.event_line_class=function(…

I have tried this but it does not work

Also noticed that your css class spec does not include div
Mine that works for events is:
.dhx_cal_event.complete_task div{
background-color: grey;
color: white;
}

#4

Do I need to create a seperate class for event_line such as
Nope, same “event_class” as in other views will be used for timeline.

Please check the attached sample.
s21.zip (59.3 KB)

#5

OK the class is now working however only the text color is changing. Background color of the bar is not???

Here is my css

.dhx_cal_event_line.complete_task{
background-color: grey;
color: white;
}

Text color becomes white but bar color does NOT become grey.

#6

Try to change it as

background: grey !important;
#7

Ok Thanks.

So it is is Background: not Background-color:

By the way what does the event_bar refer to?

#8

And also what is the significance of the !important in the color specification?

#9

And also what is the significance of the !important in the color specification?
It will force usage of this style instead of any others. ( default background color already was defined, so without !important it is unclear which rule will be applied - default or custom one )