New Release: Mobiscroll 5.23 & 5.24

What’s New

In our latest two releases - 5.23 and 5.24 - we cover a lot of ground. We are introducing full Ivy support needed for Angular 16, fix the CLI for Ionic 7 and launching vertical resolution for the timeline along with timezone support on an event to event basis.

Angular 16 support

One of the biggest changes that comes with Angular 16 (released on May 3, 2023) is that they dropped support for ngcc (Angular compatibility compiler). That requires and Ivy build that works without ngcc and as a result libraries built with View engine won’t work starting from Angular 16. We’ll still support the View engine distribution that will be used for projects < Angular 13 and starting from version 13 and up the Ivy distribution will be installed.

This new template engine, called Ivy, was introduced in Angular 9. For the transition period (Angular 9 - 15), they introduced a compatibility compiler ( ngcc ), which automatically transformed libraries built with View Engine to be compatible with Ivy. While in Angular 9 Ivy was the default template engine, building libraries was only possible using the View Engine, Ivy for libraries was only introduced in Angular 12.

With the approach of Angular 16 we also needed to make sure that our packages will continue to work. Just simply switching to Ivy when building the library would represent a braking change, since updating to this new version would not work any more for View Engine users, so it requires a major version number change. Since we are not yet ready for a new major version, and also want to still support developers relying on the View Engine, we decided to publish a new package for Ivy, named @mobiscroll/angular-ivy . The package is built from the exact same source code, only with different Typescript compile parameters. We also updated our CLI application, which, based on the project dependencies and options, can automatically determine which package to install. It installs the Ivy package under the same alias, as the original package name (@mobiscroll/angular), so no changes are necessary in the source code, keeping things backward compatible.

In the future we will surely drop support for View Engine, but in the upcoming transition period we will provide 2 packages for Angular to support both.

Rendering days vertically in the timeline view

The timeline view is great for scheduling and planning tasks involving many resources. Both days and times are rendered on the horizontal axis by default, but with the introduction of the resolutionVertical view option, it is possible to render days on the vertical axis for one or more resources. This gives the timeline view a second dimension for single resource views and makes working with multi-resource views easier in some situations.

If you are interested in seeing a weekly or monthly overview for a single resource in a timeline layout, you can set it up with the help of the new resolutionVertical view option and hourly horizontal resolution.


Single resource timetable

If there are more resources involved (like classrooms) you can set up a daily vertical resolution and hourly horizontal resolution to enable scheduling classes for an entire week across multiple rooms.


Multiple classroom scheduling

Timezone support added for events

While timezone support was introduced a while ago in the form of dataTimezone and displayTimezone we are adding timezone support the event object through event.timezone .

This makes it possible to work with events that are in a different timezone than the whole calendar. It also is crucial for recurring events in a dynamic timezone environment. The engine needs to know which timezone the event was created in so that it can correctly calculate the occurrences.

The new event.timezone property expects the same values as the dataTimezone and displayTimezone options.

Ionic 7 support for the CLI

The latest version of Ionic framework is supported, however there were some issues with Mobiscroll CLI in how it configured the project and installed Mobiscroll. Those issues have been addressed since.

What’s next

Besides a brand new Vue version we are working on exciting new features, like dragging events outside and in-between event calendar instances and more tools that enable new interaction models.

Read the full blog post

MOBISCROLL 5.24

Agenda

NEW

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.

FIXED

  • We fixed an issue where an extra empty space was displayed above the event times.

Eventcalendar

NEW

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.

FIXED

  • We fixed an issue where navigating the calendar with an external button did not work, if the selected date was pressed twice.

Scheduler

NEW

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.

FIXED

  • We fixed an issue where grouping by resource was lost on dynamic view change.
  • We fixed an issue where the header and columns did not align on dynamic view change.

Timeline

NEW

  • We added support to store the timezone directly on the event, which takes precedence over the dataTimezone option.
  • We added an improvement to keep the visible date and time in view after a dynamic view change.

FIXED

  • We fixed an issue where the row heights were not calculated correctly when changing to or from event listing mode.

MOBISCROLL 5.23.2

Select

FIXED

  • We fixed an issue where the picker was not opening when using the Angular or React components (regression introduced in 5.23.1).

Timeline

FIXED

  • We fixed the sticky label of the events, when days are displayed vertically and there are no resources.

MOBISCROLL 5.23.1

Agenda

FIXED

  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.

Datepicker

FIXED

  • We fixed the range selection, when the picker used 2 inputs, it was initialized on the start input and the display was modified using the responsive option.

Eventcalendar

FIXED

  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.

Forms

FIXED

  • We fixed the radio and segmented components which were not working correctly when there was no value specified on the segmented or radio items.

Scheduler

FIXED

  • We fixed a layouting issue where the events were overlapping in some cases.
  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.

Timeline

FIXED

  • We fixed the shadow of the header for the Material theme.
  • We fixed the getEvents and getInvalids methods, which did not handle all-day data correctly.
  • We fixed the date columns which were not expanding vertically, if used without resources.

MOBISCROLL 5.23

All Components

NEW

  • We made Angular packages available in Ivy format, making it compatible with Angular 16.

FIXED

  • We fixed the Today button of the calendar, which did not select today’s date correctly.
  • We fixed a validation issue, when an invalid range intersected with the minimum date. (#515)

Timeline

NEW

  • We are introducing vertical timeline segmentation by day though the resolutionVertical view option.

For the full changelog please visit our release history.

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

Download the latest version now