Starting from dhtmlxScheduler 2.0 it possible to create a view, where x-scale is based on some property of events (not only on time).
At first, an additional js file needs including.
<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" charset="utf-8"> <script src="codebase/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
After that you need to define the collection, which will be used for x-scale creation
var sections=[ {key:1, label:"Section A"}, {key:2, label:"Section B"}, {key:3, label:"Section C"}, {key:4, label:"Section D"} ];
then define name of the tab and the property of events for mapping ( starting from scheduler 2.2 it's possible to load the list of sections from server side )
scheduler.createUnitsView({ name:"unit", property:"section_id", list:sections });
And finally add the new tab to html layout and register the tab label
scheduler.locale.labels.unit_tab = "Unit"
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div> <div class="dhx_cal_tab" name="unit_tab" style="right:280px;"></div>
So, you'll get the additional tab, which will shows events per sections
samples/sample_units_view.html contains a live sample
If you have too many units, you can enable step-like scrolling, by using
scheduler.createUnitsView({ name:"unit", property:"section_id", list:sections, size:10, step:5 });
Two additional parameters are
If some event belongs to none of the defined units it's presented in the first unit. Starting from the version 3.0 you have the possibility to skip such events and not to display them at all.
To do this, use the property skip_incorrect:
scheduler.createUnitsView({ name:"unit", property:"section_id", list:sections, skip_incorrect:true });
By default, the property takes the value 'false'.