Skip to main content

Mobiscroll 6 upgrade guide

Overview​

This guide outlines all the major changes, deprecations, and removals introduced in Mobiscroll version 6. It includes detailed explanations and practical migration examples to help you upgrade from v5.

Browser Support​

Starting with Mobiscroll 6.0, we dropped support for IE11. Additionally, we updated the minimum supported browser versions:

  • Chrome 56
  • Firefox 32
  • iOS/Safari 13
  • Edge 79

Frameworks​

Starting with Mobiscroll 6.0 we updated the minimum supported framework and language versions. Please upgrade to Angular 9+ to continue using Mobiscroll. Additionally, TypeScript 4+ is now required.

Packages​

To align with current ecosystem standards, we renamed the packages as follows:

  • We renamed angular-ivy to angular to reflect compatibility with Angular 13 and newer.
  • We renamed the original angular package to angular-legacy, now targeting Angular 9–12.

To automatically handle the package updates and apply these changes, the simplest method is to re-run the configuration command in your project. Navigate to your project's root folder and run:

mobiscroll config angular

General​

Theme updates​

Mobiscroll 6.0 introduces redesigned themes based on the latest Fluent, Material, and iOS design systems. These updated themes are used by default and are exposed primarily through CSS variables.
For a complete list of theme-level variables and guidance on how to override them, see the CSS variables overview.

If you prefer the previous (v5) appearance, you can continue using the legacy themes. Legacy themes are not part of the default styles. To use them, also load the legacy stylesheet bundle, which includes:

  • mobiscroll-legacy.min.css
  • mobiscroll-legacy.scss

Using legacy themes​

Regardless of whether Mobiscroll was installed from NPM or from a downloaded package, import the legacy styles from the Angular package:

Using CSS:

import '@mobiscroll/angular/dist/css/mobiscroll-legacy.min.css';

Using SCSS:

@import '@mobiscroll/angular/dist/css/mobiscroll-legacy.scss';

Then set the legacy theme:

After loading the styles, reference one of the legacy themes:

mobiscroll.setOptions({
  theme: 'ios-legacy',
  // theme: 'material-legacy'
  // theme: 'windows-legacy'
});

Sass updates​

Starting with Mobiscroll 6.0, we updated our Sass code to remove deprecated functions. The minimum supported Sass version is now 1.80.0., and we no longer support node-sass. If you're currently using node-sass, we recommend switching to the sass package, which is now the primary implementation. For help with the migration, refer to the official Sass upgrade guide.

HTML support in strings​

We dropped support for HTML markup in strings for improved security. It is only supported in jQuery and JavaScript render functions.

Datepicker​

Changed​

We changed the default refDate from 1970/01/01 to today.

Removed​

We removed the weeks option. Use calendarSize instead.

<mbsc-datepicker [weeks]="6"></mbsc-datepicker>

Agenda​

We performed a cleanup and standardization of template option names. This improves consistency across components. Deprecated names are still supported for now but will be removed in a future release.

Changed​

We changed the default refDate from 1970/01/01 to today.

We renamed the eventTemplate template to agendaEventTemplate.
We renamed the eventContentTemplate template to agendaEventContentTemplate.
We renamed the dayTemplate template to agendaDayTemplate.

<mbsc-eventcalendar [eventTemplate]="myTemplate"></mbsc-eventcalendar>

Eventcalendar​

We performed a cleanup and standardization of template option names. This improves consistency across components. Deprecated names are still supported for now but will be removed in a future release.

Changed​

We changed the default refDate from 1970/01/01 to today.

We renamed the labelTemplate template to calendarEventTemplate.
We renamed the labelContentTemplate template to calendarEventContentTemplate.
We renamed the eventTemplate template to popoverEventTemplate.
We renamed the eventContentTemplate template to popoverEventContentTemplate.
We renamed the dayTemplate template to calendarDayTemplate.
We renamed the dayContentTemplate template to calendarDayContentTemplate.

<mbsc-eventcalendar [labelTemplate]="myTemplate"></mbsc-eventcalendar>

Scheduler​

Header consistency​

We unified the Scheduler header layout across different view configurations. The single-day view with resources now uses the same header structure as multi-day (e.g., weekly, monthly or daily) views. This ensures a consistent look and feel regardless of the selected view type.

Changed​

We performed a cleanup and standardization of template option names. This improves consistency across components. Deprecated names are still supported for now but will be removed in a future release.

We renamed the scheduleEventTemplate template to schedulerEventTemplate.
We renamed the scheduleEventContentTemplate template to schedulerEventContentTemplate.
We renamed the dayTemplate template to schedulerDayTemplate.
We renamed the dayContentTemplate template to schedulerDayContentTemplate.

<mbsc-eventcalendar [scheduleEventTemplate]="myTemplate"></mbsc-eventcalendar>

We also renamed the schedule view to scheduler:

<mbsc-eventcalendar [view]="{ schedule: { type: 'day' }}"></mbsc-eventcalendar>

Timeline​

We performed a cleanup and standardization of template option names. This improves consistency across components. Deprecated names are still supported for now but will be removed in a future release.

Changed​

We renamed the scheduleEventTemplate template to timelineEventTemplate.
We renamed the scheduleEventContentTemplate template to timelineEventContentTemplate.
We renamed the dayTemplate template to timelineDayTemplate.

<mbsc-eventcalendar [scheduleEventTemplate]="myTemplate"></mbsc-eventcalendar>

We added a new eventDisplay property to the view option that takes 'exact' or 'fill' as values, and deprecated the eventList boolean property.

<mbsc-eventcalendar [view]="{ timeline: { type: 'day', eventList: true }}"></mbsc-eventcalendar>

Removed​

We removed the deprecated resolution property from the view option. Use the resolutionHorizontal property instead.

<mbsc-eventcalendar [view]="{ timeline: { type: 'day', resolution: 'hour' }}"></mbsc-eventcalendar>