Announcing Bryntum Suite 5.0

Improved external drag drop

One of the most frequent topics of our support forums and pre-sales calls involve dragging tasks or objects from an outside grid onto the timeline. We decided to refactor, simplify and polish our drag utility and in 5.0, dragging from and to external sources is so much easier to implement. The existing drag-drop demos have been updated and a few new ones were added.

New Resource Utilization widget

In Scheduler Pro and Gantt, there is a a new ResourceUtilization widget showing the resource utilization broken down by task and time unit. This is a very useful visualization when trying to avoid resource overallocation. To learn more, please refer to the API docs or try one of the new demos.

New conflict resolution UI

Scheduler Pro and Gantt now display a popup informing users of scheduling conflicts, cycles and calendar misconfigurations. The popup allows the user to pick an appropriate resolution for the case at hand. Try it out by clicking the button in this demo.

Tree grouping feature

The Grid component has a new TreeGroup feature that can transform both flat and hierarchical datasets into new trees. The parent levels in the new tree are determined by each record's values for an array of fields (or functions). Below you can see a simple example which yields a tree with two parent levels where the first level is grouped by the city field value and the second level is grouped by age.

const tree = new TreeGrid({ 
appendTo : 'container',
features : {
treeGroup : { levels : ['manager', 'airline'] }

Performance improvements

In 5.0, the time to initial render of events and tasks in Scheduler Pro and Gantt has been drastically improved. Previously, we delayed the initial render until the engine had normalized and corrected all the schedule data. In the latest release, we now render the initial data immediately and let the engine continue in the background. You can compare the previous approach to the new in this Gantt demo.

Parent area highlight feature

We added a new feature to our Gantt chart called ParentArea that highlights the area encapsulating all child tasks of a parent. See it in action in the new parent-area demo.

Visualizing calendars and time spans

The Gantt and Scheduler Pro both contain lots of data relating to availability of resources and tasks, data which is important for the end user to see and understand. If an end user is not able to drag a task to a certain place, there needs to be a clear UI revealing the reasons. We therefore added multiple new features and demos to help you visualize the detailed rules of your schedule & project in Scheduler Pro and Gantt.

Merge cells / row span feature

Grid has a new MergeCells feature that can merge cells between rows containing the same value in a column by which the Grid is sorted, essentially creating row spanning cells. It can also be used in Grid-based products such as Scheduler, as shown in the new merge-cells demo.

Merge cells feature

Travel time / event buffer

One of the most popular requests over the last few years is the ability to define a timespan before and after an event takes place. In a field service type application, technicians typically need to travel to get on site before doing the work. In a factory, a machine might need to be prepared before and cool down after a job. The new EventBuffer feature in Scheduler Pro lets you visualize concepts such as travel time or setup and teardown time very easily. Try it out in the new travel-time demo:

const scheduler = new SchedulerPro({ 
appendTo : 'container',
features : {
eventBuffer : {
showDuration : true,
tooltipTemplate : ({ duration }) => `Travel time: ${duration}`

Combining multiple Bryntum components

In 5.0 we have greatly simplified how to combine multiple Bryntum components in the same app by introducing thin bundles for both JavaScript and CSS. The difference between thin bundles and our old bundles are that the thin bundles only have product specific code, letting you combine multiple products without having shared code downloaded multiple times. This approach also ensures there is only a single version of a class available, avoiding some of the pitfalls of combining the old bundles. This snippet illustrates the usage, old vs new:

// Old, all imports from a single bundle 
import { Scheduler, DateHelper } from 'scheduler.module.js';
// New (optional), import from the correct products thin bundle import { DateHelper } from 'core.module.thin.js';
import { Scheduler } from 'scheduler.module.thin.js';

Gantt ProjectModel in Angular, React & Vue

Another step towards simplifying combining multiple Bryntum products in the same app is the introduction of a separate ProjectModel component for Angular, React and Vue. It allows creating a single project and sharing it between multiple components in a similar way as one can in non framework apps. This snippet illustrates how it is done in React:

// Project holding all data 
<BryntumProjectModel ref={project} calendars={calendars} tasks={tasks} assignments={assignments} dependencies={dependencies} resources={resources} timeRanges={timeRanges} />
// Gantt using the project
<BryntumGantt ref={gantt} project={project} />

React components now use ES module bundle

The React wrapper and accompanying demos now use the ES module bundle instead of the legacy UMD bundle. Aside from being a more modern approach, the bundle is slightly smaller and more performant. If you are using our React wrapper, you need to adjust your imports accordingly:

// 4.x imports from the umd bundle 
import { TaskModel } from '@bryntum/react/gantt.umd.js';
// 5.x imports from the module bundle (which is the default bundle for the package) import { TaskModel } from '@bryntum/react';

Test case extraction

When reporting a hard to reproduce issue to us in the Bryntum’s support forum, we often request a test case showing the issue. A good test case greatly reduces the time it takes from reporting the bug until a fix can be put in place and released.

Calendar sidebar enhancements

The side bar date picker can now be configured with to show a small bullet for day cells which contain events. This is useful for end users looking for an empty day, or vice versa.

calendar = new Calendar({ 
// Show event presence as bullets in the date picker cells
datePicker : { events : true }

In other news…

The release contains even more new features and improvements, such as:

  • Events in Scheduler & Scheduler Pro are now absolutely positioned, allowing us to use native sticky behavior (cheaper)
  • Records can now be made readOnly to prevent editing
  • New Radio button and RadioGroup widgets
  • Widgets can now automatically persist state changes
  • The built in version of FontAwesome Free was upgraded to v6, which includes a few Bryntum sponsored Gantt icons used in the task menu (such as this one)

Summing up

Version 5.0 brings lots of cool new features and demos you can use and learn from. Since this is a major release, we have also done some house cleaning and removed previously deprecated APIs. So be sure to check the changelogs and study the upgrade guides.



CEO @ Bryntum, passionate about all things web dev / JS / CSS.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mats Bryntse

Mats Bryntse


CEO @ Bryntum, passionate about all things web dev / JS / CSS.