What’s New
With the last release of the year, we are happy to introduce new capabilities that enable a wide range of actions for the timeline resources, along with dynamic zoom, better control over columns and a big step towards making working with a lot of data not a performance killer.
Reordering resources
Resources are rendered in the order they are passed to the resources array. Besides that, the order can change if some resources are fixed the top making the list below that scrollable, however that is not necessarily a fully custom order.
There are situation though when a custom order of resources helps the people working with the calendar. Imagine the timeline loading with a default order, but for the purpose of setting up tasks for the week effectively, seeing the resources in a custom order would eliminate unnecessary filtering and scrolling around. This could be just a temporary order until the next page reload, a custom order saved in local storage for the running session, or synced across devices and stored in a database.
Either way, the reordering capabilitites introduced in this release will make things a breeze for both developers and users.
Reordering can be enabled by setting resourceReorder: true which will display drag handles for the resources that have their reorder property set to true and put the UI into drag & drop mode. Various lifecycle events are triggered through the interactions that can be used to further customizing the experience.
Explore the demo and check out how you can reorder resources through drag & drop.
Sorting the timeline
The default order of the resources or rows in the timeline is determined by the order they are put in the resources array. This order can be changed on the fly by manipulating the array and updating its content.
From an interaction perspective, users might require an order update or sort by resource name, resource property, by hour, day, week or any column for that matter. There might also be cases when sorting should happen based on more complex calculations.
We have added a number of examples on how resource sorting can be implemented may that be ASC/DESC or default order on resource columns and even day columns or sidebar columns. Ordering can come from an external dialog which takes different parameters of the resources and their events into account or by clicking on the headers of the columns.
Check out the updated resource grid example where we added sorting to the grid headers, including resource columns, sidebar and day headers as well.
This solution is pretty flexible and customizable since it uses the templating capabilities of the column headers, which means that you can customize everything from highlight to icons to actions.
In this example, which features a sorting modal that can be invoked from the calendar header, you can select the sorting criteria - based on a contextually relevant calculations - and the sort order.
Another cool thing about this demo is when you add, update or delete data from a resource row, which might affect its position in the currently applied order, the calendar dynamically navigates to the new position and temporarily highlights the row so that the user doesn’t lose track.
You can get creative and design your sorting and ordering logic the way you like, and with the available tooling like templating and lifecycle events you can actually make it happen for your users.
Zooming the timeline
Zooming in & out a timeline view for better visibility and overview could mean a couple of things. It could be increasing the length of the events, navigating across different horizontal resolutions - like hourly, daily, weekly, monthly, quarterly, yearly - and changing the width of the columns.
Dynamically changing the the resolution was already possible before this release, however it was hard to create a cohesive user experience. For simple resolution changes this was ok, but for a full zoom in/out experience with a lot of steps it could have gotten a bit disorienting for users.
We have enhanced the tooling, introduced an easier way to design the list of zoom levels that you would like to support and also added a simple way to apply the zoom level on the fly. All that with a great UX in mind, because it turned out that we’ll have to take the focus point of the user into account for the smoothest zooming experience, we are happy with the current state of tools for zooming.
We are adding the columnWidth property with a number of presets ranging from xxsmall to xxxlarge, which not just helps with designing a great zooming experience but also helps with dynamically changing the width of columns based on resolution.
We have also added the pair of zoomLevels and zoomLevel properties, where the first is an array of predefined options and values where you can control things like type, size, resolutionHorizontal, columnWidth and much more. And the zoomLevel simply takes care of applying the desired zoom preset.
With this, the UX is up to you on how you would like to handle changing the zoom level, may that be with buttons, a slider inside or outside of the calendar.
Check out this interactive demo and take a look on how you can add zoom capabilities to your timeline views.
Resource column width
With the newly introduced columnWidth property you now have control over dynamically changing the width of the columns, which ranges from xxsmall to xxxlarge. These presets have predefined widths, which can be overridden in CSS.
This is not applicable to the resource column, which we made dynamic in case of hierarchies.
I case of very deep hierarchies the resource column would get very small and the content unreadable, so we are dynamically increasing the width by 20px when a parent is expanded. This can be easily changed in CSS, under .md-resource-grouping-hierarchy .mbsc-timeline-resource-depth-step to a custom value or simply removed by setting it to 0px.
See how the resource column width adjusts itself.
Performance with a lot of data and loading things on demand
Since we introduced virtualization to the timeline view we opened up doors to large views and enabled work with thousands of resources at once even on less powerful devices like smartphones or tablets.
With all that, there were still situations when our customers were looking to load tens of thousands or even hundreds of thousands of events in a single view. Our event layouting engine needs to process all that data and there was some latency when drag & drop or event creation happened.
Another issue posed loading so many events with their custom fields and properties into memory, which could take several seconds and lock the view behind a loading animation.
As a solution we have added more control over when the data can be loaded - may that be events and/or resources - in form of new lifecycle events that are triggered on virtual page scroll.
You can use the onVirtualLoading lifecycle event to load data on vertical or horizontal scrolling.
Take a look at how you can load events on virtual scroll and how you can load both events and resources on scroll.
What’s next
We are proud of the new product features and capabilities we shipped across 2024 and are looking forward to a well deserved rest for the last couple of weeks of the year. Can’t wait to start next year, recharged and rested and show what we’ve been planning and designing for you.
MOBISCROLL 5.33
Datepicker
FIXED
- We fixed an issue where were not all times were selectable on the time scroller on days when daylight saving time change occurs.
Eventcalendar
FIXED
- We fixed an issue where the Angular component did not work correctly with custom label templates (regression introduced in v5.32.0).
Popup
FIXED
- We fixed an issue where the popup could be closed with 2 clicks only, if another popup or a picker was also opened from the first popup.
Timeline
NEW
- We improved the readability of resource columns for hierarchies. The width of the resources is dynamically adjusted based on the maximum navigated hierarchy depth.
- We added the
onVirtualLoadinglifecycle event, which is triggered when a new virtual page is loaded, both on horizontal and vertical scrolling. This enables on-demand loading of events and resources as users scroll through the timeline. - We added the
resourceReorderproperty to the timeline view configuration. When set totrue, drag handles appear on each resource, and enables reordering through drag & drop. When the drag starts, theonResourceDragStart, when it ends, theonResourceDragEndevents will fire. When the order of a resource is changed after drop, theonResourceOrderUpdatelifecycle event will be fired with the new sort order. - We added the
reorderproperty to the resource object, which defines whether a resource can be dragged from its current position in caseresourceReorderis enabled. - We added the
zoomLevelsproperty to the timeline view configuration which enables the configuration of multiple zoom stages. It accepts an array of key, object pairs that describe each zoom level that is supported. The current level can be set using the newly introducedzoomLeveloption, by setting the key of the previously defined levels from thezoomLevelsobject. - We added the
columnWidthproperty to the timeline view configuration to set overall timeline column widths. If not set, the default widths apply, which depend on the resolution. The following presets are supported:'xxsmall'- 24px (1.5em),'xsmall'- 48px (3em),'small'- 72px (4.5em)'medium'- 96px (6em),'large'- 120px (7.5em),'xlarge'- 144px (9em),'xxlarge'- 168px (10.5em) and'xxxlarge'- 192px (12em). The preset widths can be overridden if necessary through their CSS classes.
FIXED
- We fixed an issue where events inside a resource with event creation disabled were not draggable.
For the full changelog please visit our release history.
PS. You will find an upgrade guide for moving from Mobiscroll 4 to Mobiscroll 5.