New release: Mobiscroll 5.30 with variable event heights, lists within events, group summaries, task progress and Angular 18 & React 19 support

Happy to introduce variable event heights, not just as a UX improvement to display content that might have been truncated before, but also opening up new usage opportunities and adding new capabilities to the timeline view.

Variable event heights

Displaying events on the timeline view is a complicated task. There are a lot of parameters to consider, like the page size and resolution of the view, the visible days and hours, the overlaps between the events… just to name a few.

This became even more complicated when we introduced virtual scrolling, to improve performance on large views with loads of data. So far, by knowing that all events have the same height, we could exactly calculate the dimensions of the timeline grid, even without displaying the rows, columns and events outside of the active virtual page.

With the introduction of variable height events this is no longer possible, so in case of large views we initially estimate the height of the rows which are outside of the currently active virtual page (not visible yet) and continuously update the dimension calculations during scroll, as new rows, columns and events are rendered. This all needs to happen so that size corrections don’t disrupt the continuity of scrolling and don’t result in content shifts (or at least minimizes the number of content shifts).

Navigating to an event was also a challenge. Not being present on the currently active virtual page, we only know the approximate location of it, so again we need to dynamically adjust parameters during navigation to ensure that we scroll to the correct location.

Since there are a lot of moving parts to supporting variable event heights, it is released as an experimental feature, and not enabled by default. You can activate it by setting the eventHeight: 'variable' property for the timeline inside the view option which then activates the new rendering mode. Besides having variable event height activated, you will need to make sure that your event templates handle the rendering of variable event heights.

This enables new use-cases and opens up new capabilities. Useful when the content of the events vary, for example rendering lists with various lengths or supporting multiple event types with different content templates. If you want to keep all content visible, irregardless of the event length (width), the height will dynamically change when resized and not truncate depending on the available space.

See it action and learn how you can enable it for your content.

Variable event heights with auto-resizing resource tracks

Sub-tasks as list on events

A lot of the times certain tasks, jobs or work orders require further division into sub-task or checklists – divide and conquer! And a lot of times it makes sense to tackle these lists right in the context of the work order.

With the addition of variable event heights it is possible to render different sized events that also grow the resource row height depending on the rendered events.

Take a look at the following example where you can add items to a list right on the work orders. Use it as a starting point for building out more complex views and customize it to your needs and requirements.

Showing sub-tasks and lists on events

Summaries for resource groups

At times when an overview of tasks under a single group needs to be easily accessible, you can use the parent resource rows to display summaries or aggregates. If this needs to happen across all resources and not on a group by group basis, utilizing header templates is the way to go.

A good example where such summaries per group are useful is for internal fleet bookings where each group represents a separate location and the resources are the vehicles that can be booked on a daily basis.

Aggregates and resource groups summaries

These dynamically calculated values can be presented as custom templated events in resource parent rows. Whenever new bookings are made, updated or deleted, use the onEventCreatedonEventUpdated and onEventDeleted lifecycle events to update the aggregates for their parent resource.

This is another great example that wasn’t possible without the support for variable event heights.

Showing and setting task progress

Usually a Gantt chart feature, showing progress on tasks visually in an overlay and setting it either programmatically or manually with a slider can be useful in a lot of situations.

Using the event templating capabilities, it is possible to render a live slider that reacts on hover and enables updating the progress inline.

Use the renderScheduleEvent function to customize the template and adjust it to your needs.

Besides being able to update progress right on the event, it is also possible to add a slider that controls task progression – saved in a custom property of the event – inside an add/edit dialog.

Check out the live example and use the demo as a starting point and expand on it.

Gantt-like task progress on events

Adding React 19 support

As we prepared 5.30, React 19 was just to be released. It came with a number of breaking changes, some of which affected Mobiscroll.

The render and unmountComponentAtNode functions are no longer available in React 19, the functional versions of the notifications (alertconfirmprompttoast and snackbar) stopped working. In v5.21.0 we introduced the component variants (<Alert /><Confirm /><Prompt /><Toast /> and <Snackbar />), which can be used instead.

To avoid breaking older React apps using the notification functions, we created a separate package for React 18 and above. The Mobiscroll CLI – mobiscroll config react – will install the correct package depending on the React version of the project. When using our Download Builder, “React 18+” should be selected as the framework.

Adding Angular 18 support

With Angular 18 released, things changed a little on how the builder looked for the TypeScript definition files. We updated the package.json to make it compatible with the latest version.

General bugfixes and improvements

In addition to all these new capabilities we shipped a number of bugfixes and improvements related to the Angular version of Mobiscroll, the Select component and to the Timeline view where the native browser zoom messed up the layout in some situations.

What’s next

We are working on some new things that will add more control over event ordering, enable dynamic resource filtering and improve virtual scroll performance and timeline performance in general. We are also making steps towards preparing for Mobiscroll 6.

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!