Multi color events in timeline view

Scheduler Javascript
#1

Hi folks,

first of all: thank you for your great work on the scheduler. It safed me a lot of time. To my actual Problem. I’m using the timeline view of the scheduler to view the state of a task which is running on some resource. Now a task goes throught different states like “initial”, “waiting”, “running” and so on…this states can appear in some order (not important for my question). I want to use colors to indicate when a resource is in a paticular state. It should look like this. A task correspondes to an event in the scheduler context.

####################################################################

---- light grey: init — # ----- red: waiting ------ # ----green: running ----- … and so on

####################################################################

How can I style an event such that a bar in timeline view will look like this?

#2

Hello,

Please check
scheduler\samples\02_customization\01_events_coloring.html
sample. Same logic could be applied to other views:

  1. Set up some event types or statuses, create corresponding CSS classes
  2. Create event_class template which will return required class

Kind regards,
Ilya

#3

Hey,

I figured out a solution for my problem. Check the screenshot below. I’m using several divs inside of the bar. The size of each stage is given from the model. Odd to discribe. Just check out the code.

Model:

<event id="12">
		<start_date>2011-11-25 16:26:07.0</start_date>
		<end_date>2011-11-25 16:40:55.0</end_date>
		<text>some text</text>
		<someid>0</someid>		
	<stages>
          <stage>
              <id>1</id>
              <state>INIT</state>
              <color>#D3D3D3</color>
              <quantity>5</quantity>
          </stage>
          <stage>
              <id>2</id>
              <state>WAITING</state>
              <color>#FF0000</color>
              <quantity>10</quantity>
          </stage>
    ...

scheduler.templates.event_bar_text=function(start,end,event){
            
            var bar_partition = "";//event.text;
            
            if(event.stages != undefined){
            
	            for(var i = 0; i < event.stages[0].stage.length;i++){
		            //get event width
		            var renderedEvent;
		            var renderedEvents = document.getElementsByClassName("dhx_cal_event_line");
		            for(var j = 0; j <  renderedEvents.length; j++){
		            	               
		               if(renderedEvents[j].getAttribute("event_id") == event.id){
		                   renderedEvent = renderedEvents[j]; 
		                   break;
		               }
		            }
	            
		            if(renderedEvent != undefined){
			            var color = event.stages[0].stage[i].color
			            var state = event.stages[0].stage[i].state
			            var quantity = event.stages[0].stage[i].quantity
			            
			            renderedEvent.style["paddingLeft"] = "0";
			            
			            bar_partition += "\n" + 
			            "<div style='"+
			            "float:left;" +
			            "height:"+ "13"+ "px;" +
			            "width:"+ (parseInt(quantity) / 100) * parseInt(renderedEvent.style.width.replace("px",""))+ "px;" +
			            "background-color:"+ color + 
			            ";'>" + state+ "</div>";
		            }
	            }
            }
            return bar_partition;               
        }

multicolor.jpeg886×238 30.6 KB

#4

I thought you wanted to color event in a single color, not create sections inside of it.
event_bar_text template is the right place for such customization.

So it’s working for you?

Best regards,
Ilya

#5

Yes its working for me.

Best regards,
Luke