New Release: Mobiscroll 5.28 & 5.28.1

Announcements
1

What’s New

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.

https://demo.mobiscroll.com/scheduler/control-number-of-concurrently-shown-events#https://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/00b47387-0689-8292-5a55-13d9d177249d.gif(image larger than 4 MB)

Event stacks for Scheduler

https://demo.mobiscroll.com/timeline/control-number-of-concurrently-shown-events#https://mcusercontent.com/03c1c3fac1ec96e655be9d223/images/4410dfad-87d9-0f69-9e9e-8b8a68a68c1e.gif(image larger than 4 MB)

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

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!

Read the full blog post

MOBISCROLL 5.28

All Components

NEW

  • We added the dateFormatFull locale option, which is used by screen readers to read out full dates. This improves accessibility for localized instances.

FIXED

  • We fixed the tree shaking when some inner components were always included in the bundle.

Agenda

NEW

  • We improved the quick navigation component used in the header of the calendar allowing for date selection where it makes sense instead of just month & year. We further improved the UX by refining the defaults based on the view configuration.

Datepicker

NEW

  • We added types to the lifecycle event arguments that improves the development workflow when working in Typescript.

FIXED

  • We fixed the Extraneous non-props attributes warning for the Vue component when locale options were set.

Eventcalendar

NEW

  • We added the immutableData option. When it is enabled the component won’t update the passed data directly and it is the responsibility of the developer to handle the updates in the appropriate lifecycle events.

FIXED

  • We fixed the Vue component to accept the dateFormatLong option among other missing localization options.
  • We fixed the styling of the selected date rendered previously incorrectly if the calendar was placed inside a Mobiscroll grid layout.

Popup

NEW

  • We added types to the lifecycle event arguments that improves the development workflow when working in Typescript.

Scheduler

NEW

  • We improved the quick navigation component used in the header of the calendar allowing for date selection where it makes sense instead of just month & year. We further improved the UX by refining the defaults based on the view configuration.
  • We added the maxEventStack option to limit the number of displayed events in the schedulers columns. If the number of events reaches the specified value, a “more” button will be shown which opens a popover listing the undisplayed events.
  • We added the minEventWidth option to specify the minimum event width in case of the Scheduler view. The value will be used when the maxEventStack: 'auto' option is enabled.

FIXED

  • We fixed the @cell-double-click event, which was not working in Vue.
  • We fixed a bug where it was possible to create events on invalidated days.

Select

NEW

  • We added missing types to the renderItem arguments.
  • We added types to the lifecycle event arguments that improves the development workflow when working in Typescript.

Timeline

NEW

  • We improved the quick navigation component used in the header of the calendar allowing for date selection where it makes sense instead of just month & year. We further improved the UX by refining the defaults based on the view configuration.
  • We added the fixed property to resources enabling sticky rows that remain fixed at the top of the calendar.
  • We added the maxEventStack option to limit the number of displayed events in the timeline rows. If the number of events reaches the specified value, a “more” button will be shown which opens a popover listing the undisplayed events.

FIXED

  • We fixed an bug where the event data for the custom header and footer templates was lost on navigating the view.
  • We fixed the @cell-double-click event, which was not working in Vue.

MOBISCROLL 5.28.1

All Components

FIXED

  • We fixed the monthly and yearly recurrence, where the COUNT option was not working if BYSETPOS was also specified.

Datepicker

FIXED

  • We added added a publicly available type to the controls option, called MbscDatepickerControl.
  • We added the missing month property to the MbscDatepickerPageChangeEvent type.
  • We fixed the calendar header which was not displayed correctly in Vue.

Eventcalendar

FIXED

  • We fixed a bug in the print module that prevented the display of svg elements.

Forms

FIXED

  • We fixed the stepper styling in Angular.

Timeline

FIXED

  • We fixed an issue where the timeline grid was not always repainted correctly after window resize.
  • We fixed an issue where after changing the resources, the timeline remained scrolled to an empty space in Firefox.

For the full changelog please visit our release history.

PS. You will find an upgrade guide for moving from Mobiscroll 4 to Mobiscroll 5.