Happy to introduce Mobiscroll for Vue final, control over event stacks, fixed rows for the timeline, quick navigation UX overhaul, new features for working with immutable data, accessibility and typescript improvements.
Mobiscroll for Vue final
The Vue version is officially out of beta now! There were another set of fixes and improvements added along with more smoothing out on the documentation front and the demos. So feel free to explore the vue demos and docs.
Event stacks and a show more button
Stacking occurs when a lot of events are overlapping. In case of the scheduler where the columns don’t grow in width as the number of simultaneous events grow, the labels can become hard to read and in case of the timeline the height of some resources might be significantly larger than others.
With the introduction of the
maxEventStack option, you can set the maximum number of events that you would like to render at any given time. Events that are not rendered will show up in a pop-over through a “more“ button.
This results in a cleaner look and makes previously busy views easier to scan.
Fixed rows for the timeline view
Tasks like assigning/un-assigning events all within a single timeline or comparing one or more resources next to each other was all doable before, however starting with 5.28 it is possible to fix one or more rows at the top of the timeline. That way the row is fixed along with the header and it’s much easier to perform these tasks rather then dragging events up & down and scrolling long distances.
The solution is pretty simple with the newly introduced
fixed property of the resources that can be set on initialization or changed on the fly to dynamically lock rows at the top or release them.
Take a look at this example for assigning and un-assigning events and see this one for comparing resources at the top of the calendar.
Mobiscroll and immutable data
Working with immutable data is very common, especially when unidirectional data flow principles are used. Until now it was not possible to pass immutable data directly to the event calendar. The calendar mutated the data in multiple places:
- the resource data was processed, and additional fields were written to the original objects
- the event objects were also mutated when an event was dragged or resized
This resulted in errors, when immutable data was passed, and the workaround was to pass a copy of the data to the calendar, which is mutable.
In v5.28.0 it is possible to work with immutable data directly without the need for a workaround. We introduced the
immutableData option which is not enabled by default, to avoid breaking changes for those who rely on the data mutation being made. When enabled:
- the calendar will no longer mutate the input data.
- in the case of the resources, the processing will create a copy of the resource data, and add the calculated properties only there.
- in case of the events moving and resizing events will not change the original data, the calendar will only trigger the
onEventUpdatedlifecycle hooks with the modified data in the arguments, which can be used to update the data store.
Quick navigation UX overhaul for the event calendar views
With the quick navigation component that normally resides in the top left corner of every event calendar view we wanted to make it as easy as possible to move to a different year/month. Its job was to provide means for, you guessed it, quick navigation.
As time went by we added more features and expanded on the available views and their configuration with daily views, resolutions … so the job of navigating to a different day was not solved by the component we had.
With this overhaul we introduced a full date picker in the quick navigation component and we re-evaluated the defaults based on the configured views. We have also updated how the month & year selection performs, changing the selection order in some cases and even omitting some parts in other cases.
Flight scheduling with two timelines
We have published a new demo that leverages several features and tools of Mobiscroll. It brings things together, like: working with two separate timeline instances, keeping them in sync while scrolling, drag & drop between two instances, controlling the d&d interactions – limiting it to only vertical moves, dynamic validation and background coloring with CSS patterns to name a few.
The top timeline holds the unassigned reservations, while the bottom timeline would be the crew and aircraft assigned view.
Check out the functional live demo here.
We are continuously improving accessibility as we come across any issues. This time we have enabled localized date fields that were posing difficulties for some screen readers eg. NVDA by NV Access.
A Typescript update
We did another sweep through our type definitions and improved it here and there. This makes working with Mobiscroll in Typescript even smoother.
We have some more fun stuff incoming next year. Things like built-in buffer time support for events, variable event heights, more updates to our docs & guides are some of the things we are working on. Stay tuned!