Starting from dhtmlxScheduler 2.0 it possible to create a view, where x-scale is based on some property of events (on only on time).
At first, an additional js file needs being included.
<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.createUnitsViw({ name:"unit", property:"section_id", list:sections, size:10, step:5 });
Two additional parameters are