New release: 5.23 & 5.24 with support for Angular 16, Ionic 7, new timeline vertical resolution & improved timezone support

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.

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!