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.

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):

  • Render time

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.

Download Free Trial

Comments ( 2 )

  • Freddy Torres

    I’m very interested in this feature (vertical schedule). However I did downloaded the free trial version, and everytime I try to set the ‘mode’ attribute, it stops working. I’m using react as the host Framework. The integration out of the box for the non-vertical schedule works fine tho.

  • Mats Bryntse

    Glad to hear you’re interested in the vertical feature. Your issue sounds strange, if you post in our forums we’ll look into it asap!

    http://www.bryntum.com/forum

Leave a Comment