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!
Time axis improvements
Scheduler now supports using a non-continuous time axis and it can be achieved in three different ways:
- By configuring `workingTime` on Scheduler
- By filtering the ticks of time axis
- By supplying a `generateTicks` function used to generate the ticks if the time axis
The first approach is showcased in the new working time demo:
The second approach can be seen in the new time axis demo:
Lots of new demos
Ionic is a very popular framework for cross-platform apps and we decided to make a new demo for it.
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 😉
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):
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.
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:
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`.
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.
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:
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:
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.