Mats Bryntse
29 July 2019

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 […]

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.

Vertical scheduler mode

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:

Resource header

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

Learn more

For full details on what changed please see the change log.

Download Free Trial

Mats Bryntse

Bryntum Scheduler Development