What’s New
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 height
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.
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.
Resource group 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 onEventCreated, onEventUpdated 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.
Task progress
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 (alert, confirm, prompt, toast 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.
MOBISCROLL 5.30
All Components
NEW
- We added support for React 19.
Agenda
FIXED
- We fixed the empty agenda view, which was not displayed correctly (regression introduced in v5.29.2).
Eventcalendar
FIXED
- We fixed the external drag & drop on touch devices.
Forms
FIXED
- We fixed the Prompt component in React and Vue to reset the value between consecutive calls.
Timeline
NEW
- We added support for displaying events with variable heights.
MOBISCROLL 5.30.1
All Components
FIXED
- We fixed the Angular package to work with Angular 18.
Agenda
FIXED
- We fixed the extra borders appearing for empty days when used with the Windows theme.
Select
FIXED
- We fixed the usage of the group wheel, which was not working correctly.
Timeline
FIXED
- We fixed an issue where events were not appearing in Angular, when used with slots and vertical day resolution.
- We fixed an issue where the virtual scroll ended up in incorrect state after resizing the calendar container in Angular.
- We fixed an issue where external drag resulted in error if the timeline was hidden.
- We fixed an issue where the timeline columns were rendered incorrectly sometimes on certain browser zoom levels.
- We fixed the display of week numbers with custom template in Angular.
For the full changelog please visit our release history.
PS. You will find an upgrade guide for moving from Mobiscroll 4 to Mobiscroll 5.