What’s New In Bryntum Scheduler 2.0

We are really excited to announce the 2.0 release of our Bryntum Scheduler component. There is lots of new features, enhancements and a slew of bug fixes included. This blog post walks you through the bigger changes, for full details please see the change log.

Using Scheduler as a local NPM package

While yet not available on NPM, you can now install the Scheduler as a local NPM package from the downloaded sources. This makes it much easier to integrate it with JS frameworks and our framework demos has been updated with the new approach.

Depending on your setup, you can now follow these steps to include Scheduler in your Angular/React/Vue app:

1. Install the local package, by running npm install path-to-the-scheduler/build-folder
2. The package is called bryntum-scheduler, import from it in your code similar to:

import { Scheduler, EventStore, ... } from 'bryntum-scheduler';

3. Depending on your setup you can also directly import the theme you want to use:

import 'bryntum-scheduler/scheduler.material.css';

Depending your transpilation setup and if you need to support IE11 you can optionally import from the already transpiled umd bundle:

import { Scheduler, EventStore, ... } from 'bryntum-scheduler/scheduler.umd';

Major improvements

This new release is absolutely packed with new goodies and we cannot cover it all in one blog post but let’s take a look at the major ones:

New default theme – Stockholm

We have created a new modern theme for Scheduler, called “Stockholm” (the new default). Like the city itself we strived for a clean and modern look, we hope you will like it!

The new stockholm theme

Time axis improvements

Scheduler now supports using a non-continuous time axis and it can be achieved in three different ways:

The first approach is showcased in the new working time demo:

Working hours 8-17

The second approach can be seen in the new time axis demo:

Non-continuous time axis

Lots of new demos

Ionic is a very popular framework for cross-platform apps and we decided to make a new demo for it.

Demo using Ionic

The rough.js demo uses… wait for it… the rough.js library to give events a hand drawn look. Probably not very performant for bigger datasets, but looks neat 😉

Events rendered using Rough.js

The newly added cascading combos demo shows how to customize the event editor to use cascading combos (items in one combo depends on the selection of another combo):

Event editor with cascading combos

We recently visited Reykjavik to have an internal company hackathon. One of the cool things we built in Iceland was a new web sockets demo consisting of an in-browser client and a node server, allowing multiple users to interact with the same scheduler simultaneously. Try it out locally, it’s really cool!

Vue demos

We have begun a larger effort to port demos to the most popular frameworks out there. In this release we have added three demos for Vue, one using the nice Vuestic admin dashboard template and two ports of popular existing demos (using TypeScript): drag-from-grid and drag-onto-tasks.

New Vue demo based on the Vuestic template

React demos

We have also made good progress in the process of porting demos to React. The following popular demos are now ported and available for React:

  • Animations
  • Drag-from-grid
  • Drag-between-schedulers
  • Drag-onto-tasks
  • Localization

In addition to those, two new demos were also added. One simple demo showing the basics (replaces the old react_build demo) and one advanced demo using Redux and Saga:

Advanced react demo

Initial event render animation

We added the option of transitioning the first render of events. For now there is three animations to pick from: fade-in (default), slide-from-left and slide-from-top. Configure your choice on the Scheduler instance like this:

const scheduler = new Scheduler({ 
    useInitialAnimation : 'slide-from-left'
});

To prevent using an initial animation, simply configure it to false.

Sliding events in initially

New time picker

For 2.0 we wrote our own time picker to replace flatpickr (the date picker was replaced in 1.2), meaning that we now have zero dependencies on 3rd party JavaScript libraries, a big milestone! The time field was also enhanced with horizontal spin triggers for easy adjustment. You can try it out in any scheduler demo by opening the event editor. For example in the eventeditor demo.

The new TimeField in action

Dependencies + multi assignment

The Scheduler dependency drawing feature now supports events with multiple assignments. Creating a dependency between events will draw lines between all assignments involved – showcased in the new multiassign-with-dependencies demo:

Dependencies and multi assigned events

Multiregion + columns demo

The 2.0 version of our Grid was updated to support multi regions. Since Scheduler is based on Grid this is also available in the Scheduler, allowing you to also display columns to the right of the Scheduler’s time axis section as shown in the new columns demo:

Scheduler with multiple regions

Always rendering events as containers

To reduce the complexity of our code and styling rules we decided to always render events as containers. This behaviour was previously configurable using renderEventsAsContainers. With this now always on, events will always consist of an outer wrapper and an inner element (the actual bar displayed). The wrapper is used to contain labels that needs to align to the rendered event bar. This change might break some of your custom styling, especially if you where targeting .b-sch-event-wrapper.

Store tree refactoring

We rebuilt the tree support in our Store and it now works more like you would expect, and it has a root node (hidden when rendered) and data manipulations should be done on the nodes themselves rather than on the Store (instead of store.add(), use node.appendChild() etc).

As a part of the refactoring we also changed the behaviour when expanding/collapsing in a tree. The Store is considered the “visible” expanded part of the tree, while the tree in full is kept as part of the root node. When expanding or collapsing records will be added to or removed from the Store part, thus triggering add and remove related events. To distinguish these events from normal adds and removes, you can check the isExpand and isCollapse flags.

If you are not using trees, this change should not affect you.

Additional improvements

  • Split event API
  • TimeSpan style
  • Scheduler#getVisibleDateRange API
  • beforeEventEditShow
  • Manipulate header context menu items
  • Dashed and dotted column lines

Breaking changes

As part of our major releases we also ensure we do some house cleaning. Please review the list below carefully and update your code accordingly.

  • The tree refactoring mentioned above might be breaking if you are using trees
  • pickerFormat was removed from TimeField and DateField, please use format instead
  • Scheduler now renders on paint instead of on render. This should only matter if you are using Scheduler inside one of our containers (for example our TabPanel), in which case it is rendered when shown instead of directly.
  • The idField config was removed from Store. It is still available on Model.
  • EventEditors resource field was renamed from resourceIdField to resourceField

Changes to the underlying Grid functionality

We recommend you to also read the blog post about the Grid 2.0 changes, as they also apply to the Scheduler.

Learn more

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

Download Free Trial

Leave a Comment