New release: 5.9 with Timeline hierarchy, Date filtering with presets and Scheduling across multiple timezones

We are shipping hierarchy support for the timeline view. Besides this the v5 select is getting group option support plus improvements to the schedulers colored ranges are enabling entirely new use cases.

Timeline hierarchy and grouping

The timeline view of the event calendar provides a great solution when a lot of resources need to be scheduled. With a list of assets and a corresponding timeline everything is straight forward right until there are so many resources that some grouping and organizing is necessary. As a solution we are adding hierarchical grouping to the resources where each parent is a resource in itself. These hierarchies can be of variable depth and are collapsible. Check out this work order scheduling demo that is fully benefiting from the hierarchy support.

Timeline hierarchy and grouping

Two new helper methods for the event calendar

The event data and invalids can be easily accessed through their options. That data though is the actual raw data with recurrence rules, exceptions and single occurrence events. There are times when decisions need to be made based on the actual occurrence of the events, like collision detection or other complex business rules. Behind the scenes the event calendar evaluates the recurrence rules in order to print the event to the screen but that is not easily accessible from the outside. With the two new methods getEvents and getInvalids we are giving the tools in the hands of the developers so that they can easily query the processed event and invalid data.

Titles for colored ranges

We have introduced colored backgrounds and ranges in version 5.2. Since then we learned that a lot of times colored backgrounds are used to highlight specific time ranges eg. “on-site time”, “office time”, “deep work time” that have a meaning but the color is usually not enough. These are not actual events but are categories in someones schedule. 
We are adding title/label support similarly to invalid ranges to help users understand the meaning of colored backgrounds, so for example In case of workforce management the event can be scheduled within the correct boundaries, like office work for when the person is at the office.

Colored backgrounds with labels

Group options for the select

We are adding more of the v4 features to the select component as time goes on. With 5.9 support for rendering group headers is landing while separate wheel rendering is not available yet, but will follow soon.

Group headers for the select

Date filtering with presets

A common use case for the range picker is filtering. This can be done with a simple picker, but there are times when specific ranges are usually what users are looking for. A great example is google analytics with common presets like Yesterday, Today, This week, This month. We made an interactive example for this use-case with a responsive UI that is great for both mobile and desktop.

Date filtering on desktop

We have used a combination of components including the popup, range and forms. It renders a dropdown for bigger screens and a modal with bottom display on small screens. Check out the example here.

Date filtering on smaller screen

Scheduling meetings across multiple timezones

In a more and more globalized world it is not uncommon that people from different timezones work together. And because a lot of teams are distributed setting up and synchronizing meetings across multiple timezones becomes a challenge.
Timezone support was added to the event calendar a couple of versions ago, however that didn’t solve the problem of having an overview for resource availability across different timezones. With the new colored background labels we were able to put a working example together that helps team leaders see the availability of their teammates and easily scheduler meetings. Give this example go and see how you can use the labels to show timezone offsets.

Meeting planner across timezones

What’s next

We are working on printer friendly support for the event calendar, start/end hours for the timeline view among other features and improvements.


For a full list of changes check out the release notes and download the latest version.

Illustration by Ouch .pics.

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!