Units view

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
	});
  • unit - any string , will be used in tab name on the next step
  • section_id - the name of event property, which holds info for x-position
  • sections - the collection that has been defined on the previous step

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

Units Scrolling

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

  • size - defines how much units must be shown on the screen
  • step - defines scroll step