Announcing Bryntum Scheduler 2.2 With Vertical Mode
We are very excited to announce our Scheduler v2.2 release which supports a new vertical rendering mode. In the release you will also find a new header zoom feature plus a few bug fixes. For full details please see the change log. If you are low on time, simply click here to view our new vertical demo.
Vertical rendering mode
Vertical mode is a very popular way of rendering a scheduler. To try the new mode, you simply set mode to `vertical` when configuring your scheduler:
const scheduler = new Scheduler({
appendTo : 'container',
mode : 'vertical',
startDate : new Date(2019, 0, 1, 6),
endDate : new Date(2019, 0, 1, 18),
viewPreset : 'hourAndDay',
barMargin : 5,
eventStyle : 'colored',
tickSize : 80
});
The `tickSize` specifies the size of each “tick” on the vertical time axis. To have tall events, set a high value and to show a compact time axis set a low value.
Most of the features available for horizontal mode also work in vertical mode. There are a few exceptions, such as the summary, zooming and labels features. If you find that a feature you need is not supported in vertical mode, please contact us and we will investigate the possibility of supporting it.
Vertical event layout
Just like in horizontal mode, you have a few different options when it comes to configuring the event layout. In vertical mode, these are `none` (overlap), `pack` and `mixed`. See examples of these three layout types below:
The API for customizing and styling the event bars is used is exactly the same in vertical and horizontal mode, example:
const scheduler = new Scheduler({
appendTo : 'container',
mode : 'vertical',
barMargin : 5,
eventStyle : 'colored',
tickSize : 80,
eventRenderer : ({ eventRecord }) => `
${DateHelper.format(eventRecord.startDate, 'LT')}
${eventRecord.name}
`
});
Resource columns
In vertical mode, resources are shown as vertical columns in the scheduler. You can control their width and header content by using the new `resourceColumns` config. If you want to show a resource image for your resources, you should define the `resourceImagePath` to let the scheduler know where to look for resource images. To output custom content into the resource header, use the `headerRenderer`, sample below:
const scheduler = new Scheduler({
appendTo : 'container',
mode : 'vertical',
barMargin : 5,
eventStyle : 'colored',
tickSize : 80,
resourceImagePath : '../_shared/images/users/',
resourceColumns : {
columnWidth : 140,
// Show resource id + name in each header cell
headerRenderer : ({ resourceRecord }) => `${resourceRecord.id} - ${resourceRecord.name}`
}
});
The result can be seen below:
Vertical rendering performance
Since all the code of the Bryntum Scheduler is made by us, we have very tight control over the rendering. This is a major improvement compared to our Ext JS Scheduler, which is built upon the Ext JS grid panel and every resource column is an actual grid column. What this means in performance can be easily seen in the graph below when rendering 500 resources in vertical mode (measuring the initial render, smaller is better):
[vc_line_chart style=”modern” x_values=” ;Scheduler for Ext JS; ;Bryntum Scheduler; ” values=”%5B%7B%22title%22%3A%22Render%20time%22%2C%22y_values%22%3A%22%20%3B4.6%3B%20%3B0.2%3B%20%22%2C%22color%22%3A%22blue%22%7D%5D” el_class=”fps-chart”]
Thanks to very aggressive caching and reusing of elements, the new Bryntum scheduler scales very well when the number of resources grow. 500 resources are rendered in about 200ms, compared to the old Ext JS Scheduler which takes about 4.6s (rendering columns in the Ext JS classic Grid relies on JavaScript layouts).
Header zoom feature
Another cool feature we added to this release is the ability to click and drag in the time axis header to zoom to a specified range.
You can try it out in this demo. To enable it, just add it to feature configs:
const scheduler = new Scheduler({
features : {
headerZoom : true
}
});
Deprecations
- ResourceInfoColumns `imagePath` and `defaultImageName` configs was deprecated in favour of the new
`resourceImagePath` and `defaultResourceImageName` configs on Scheduler - Scheduler’s `tickWidth` property is deprecated, it is called `tickSize` now
Learn more
For full details on what changed please see the change log.