Units view

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
	});
  • 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.createUnitsView({
	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

Skipping events

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'.