In timeline view, vertical scale presents event holders, while vertical scale is a configurable time-scale.
The view has 3 modes:
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.
In this mode, events look like lines.
To init such mode you need to
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" });
scheduler.init('scheduler_here',new Date(2009,5,30),"timeline");
In cell mode, events 'fill' with colour full cells.
To init such mode you need to
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", });
scheduler.init('scheduler_here',new Date(2009,5,30),"matrix");
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
<script src='../../codebase/ext/dhtmlxscheduler_treetimeline.js' type="text/javascript" charset="utf-8"></script>
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 });
scheduler.init('scheduler_here',new Date(2009,5,30),"timeline");
Except of monstrosity list of parameters, used in createTimelineView, it seems rather simple.
'Tree mode' personality:
X scale
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
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:
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 } });
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 */ }