New release: 5.22 with timeline sidebar & footer and better control over the row heights

Happy to introduce new ways to add rich data to the timeline view, more control over the row heights and other UX improvements.

Showing more content through sidebars, headers and footers

The timeline is used for scheduling, planning and solving complex logistical problems. Contextual data and means to interact with it is important for a productive and great UX. With that in mind we are introducing five new sections to the timeline view that can be customized through templating and render functions. 

This includes the opposite end of the resource rows as a sidebar along with a header and footer. A new footer section that is rendered below the resource listing and footer cells for the day columns. This brings new tools and opportunities to render relevant information – like statistics, counts, aggregates – just in the right place that is most accessible for users.

It is possible to make these sections dynamic, just as you would with the custom resource templates or day header templates.

Timeline with sidebar, header and footer

Play around with this example and see how you can show content in more places on the timeline view.

The current time indicator and highlighted days

We have added the option currentTimeIndicator to hide the current time indicator for the scheduler and timeline. Previously only possible with CSS overrides, this can be used in situations where it doesn’t make sense and adds unnecessary noise to the UI.

Hiding the current time indicator in the Scheduler

We have also added a header highlight to the timeline view so that the current day, week, month and year is visible at a glance.

Timeline with current date highlighted

Fine grain control over timeline row heights

We have added better control over the timeline row heights. It is now easy to set a height through the .mbsc-timeline-row.mbsc-timeline-parent and .mbsc-timeline-row-gutter classes, that control the parent rows, all rows and the spacing below the events.

Better control over the Timeline row heights

This should give you the necessary tools to fine-tune the look and feel of the timeline rows.

What’s next

We are working towards a beta for our Vue components. Let us know you are interested and if you would like to hear about it. Besides that more tools are coming for handling complex planning requirements with the timeline.


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

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!