New release: Mobiscroll 5.28 with Vue final, event stacks, fixed rows for the timeline, quick navigation UX update and more

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.

Play around with the scheduler and timeline view configurations and see how the stacks look.

Event stacks for Scheduler
Event stacks for Timeline

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.

Assign/un-assign work orders

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 onEventUpdate and onEventUpdated lifecycle 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.

Quick navigation with date picker

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.

Flight scheduling with multiple timelines

Accessibility improvements

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.

What’s next

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!

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!