Timeline view

In timeline view, vertical scale presents event holders, while vertical scale is a configurable time-scale.

The view has 3 modes:

  1. Bar mode
  2. Cell mode
  3. Tree mode

To init this view, regardless of mode type, you need to make the following steps firstly:

1. Include extra files

<script src='./codebase/ext/dhtmlxscheduler_timeline.js' type="text/javascript" charset="utf-8"></script>

2. Add new tab to the html template

<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>

Then,define the desired mode.

Bar mode

In this mode, events look like lines.

To init such mode you need to

  • define parameters of timeline
scheduler.createTimelineView({
         name:		"timeline",
         x_unit:	"minute",
         x_date:	"%H:%i",
         x_step:	1,
         x_size:	15,
         y_unit:[	
              {key:1, label:"James Smith"},
	      {key:2, label:"John Williams"},
	      {key:3, label:"David Miller"},
	      {key:4, label:"Linda Brown"}	
         ],
         y_property:"section_id",
         render:	"bar"
});
  • init scheduler
scheduler.init('scheduler_here',new Date(2009,5,30),"timeline");

Cell mode

In cell mode, events 'fill' with colour full cells.

To init such mode you need to

  • define parameters of timeline
scheduler.createTimelineView({
         name:	"matrix",
         x_unit:	"day",
         x_date:	"%d %M",
         x_step:	1,
         x_size:	15,
         y_unit:[	
              {key:1, label:"Elizabeth Taylor"},
	      {key:2, label:"Linda Brown"},
	      {key:3, label:"George Lucas"},
	      {key:4, label:"John Williams"}	
         ],
         y_property:"section_id",
});
  • init scheduler
scheduler.init('scheduler_here',new Date(2009,5,30),"matrix");

Hierarchical Data Structure (tree mode)

This is a novelty of 2.3 version. The feature makes possible to group names by creating multilevel folders. In addition to more convenient represantion, it allows you to specify an event not only for individual event holder but also for the whole folder (any level).

To init such mode you need to

  • include one more extra file
<script src='../../codebase/ext/dhtmlxscheduler_treetimeline.js' type="text/javascript" charset="utf-8"></script>
  • define parameters of timeline
scheduler.createTimelineView({
	 section_autoheight: false,
	 name:	"timeline",
	 x_unit: "minute",
	 x_date: "%H:%i",
	 x_step: 30,
	 x_size: 24,
	 x_start: 16,
	 x_length: 48,
	 y_unit:[
              {label:"Web Testing Dep.", open: false, children: [
	          {key:2, label:"Elizabeth Taylor"},
		  {label:"Managers", open: false, children: [
		      {key:4, label:"John Williams"},
		      {key:5, label:"David Miller"}
		   ]},
		  {key:6, label:"Linda Brown"},
		  {key:7, label:"George Lucas"}
	       ]},
	       {key:8, label:"Kate Moss"},
	       {key:9, label:"Dian Fossey"} 
         ],
	 y_property: "section_id",
	 render: "tree",
	 folder_events_available: false,
	 dy:60
});
  • init scheduler
scheduler.init('scheduler_here',new Date(2009,5,30),"timeline");

Except of monstrosity list of parameters, used in createTimelineView, it seems rather simple.

Parameters of createTimelineView

  • name - the name of a view, the same as the name of the tab in html template ( you can have few different timeline, with different name , at the same time )
  • render - the name of a mode (“bar”, “cell” or “tree”). This parameter is reserved for future updates
  • section_autoheight - assigns automatic height adjustment of the cells
  • dy - the minimal height of cells (if section_autoheight parameter has value 'false', the height of the cells will be equal to dy, otherwise the height of the cells will be increase to fill all free space).

'Tree mode' personality:

  • folder_events_available - need to be set as “true”, if you want to have the possibility to specify an event not only for individual event holder but also for the whole folder (any level).
  • folder_dy - the height of folders in pixels (nonapplicable for cells with folder names)
  • fit_events - if section height should be increased to fit all events in there or should it be fixed (dy property). Set to true by default. Available starting with version 3.0

X scale

  • x_unit - size of units on X scale ( can be minute, hour, day, week, month, year )
  • x_step - size of single scale step ( size defined in “x_unit”s)
  • x_size - how must steps need to be shown
  • x_start - value of minimal step
  • x_length - how much x_step need to be used to fill the whole day ( it is necessary only if you are using minute or hour as x_unit )

Time scale from 8AM to 8PM, with 30 minutes step

{
	x_unit:"minute",
	x_step:"30",  
	x_size:"24",  // (8PM - 8AM)/30min
	x_start:"16", // 8AM/30min
	x_length:"48" // 24/30min
}

Time scale for two next days with 2hours step

{
	x_unit:"hour",
	x_step:2,  
	x_size:24  // 2days/2hours
}

Y scale

  • y_property - name of event's property
  • y_unit - list of options for the property

Second x scale

This option adds another x scale on top of the default one and serves to group time intervals on the original scale. Available with 3.0+ version.

Object with two options is used to enable second scale option:

  • x_unit - size of units on X scale ( can be hour, day, week, month, year )
  • x_date - date format which should be used for second scale, “July 01”
scheduler.createTimelineView({
    // other properties
    second_scale: { // adding such object to createTimelineView parameters enables second header
        x_unit: "day", // size of unit which should be used for second scale
        x_date: "%F %d" // would be translated to "July 01" for example
    }
});

Templating

All templates need to be redefined after createTimelineView call

In below snippets, you need to replace “timeline” with actual view name

text for the y-scale cells:

scheduler.templates.timeline_scale_label = function(section_id, section_label, section_options){
	return section_label+" (id: "+section_id+")"; 
};

css class for y-scale cells:

scheduler.templates.timeline_scaley_class = function(section_id, section_label, section_options){ 
	return "some_css_class"; 
};

css class for x-scale header

scheduler.templates.timeline_scalex_class = function(date){
    if (date.getDay()==0 || date.getDay()==6)  return "yellow_cell";
    return "";
}

css class for second x-scale header

scheduler.templates.timeline_second_scalex_class = function(date){ /* your code here */ }

css class for timeline cells:

scheduler.templates.timeline_cell_class = function(evs, date, section){
	// evs - list of events which will be displayed in this cell
	// date - date for which cell is displayed
	// section - object with section's properties(e.g. section.key, section.label)
	return ""; // css class which will be assigned
}

format of date in the x-scale (3.0+ version)

scheduler.templates.timeline_scale_date=function(date){
    var format = scheduler.date.date_to_str("%D, %d.%m.%Y");
    return format(date);
}

format of date in the second x-scale (3.0+ version)

scheduler.templates.timeline_second_scale_date=function(date){ /* your code here */ }

 
Starting with version 2.3, you can create new events in timeline view by double click or drag-and-drop commands. Drag-and-drop command also allows to move existing events within calendar area.