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 language versions. If you're using TypeScript, please make sure you're on version 4 or newer.

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, so you need to load an extra legacy stylesheet bundle.

The legacy package contains:

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

Using legacy themes​

If you use Mobiscroll via a bundler (from NPM or a downloaded package), import the legacy styles from the JavaScript package:

Using CSS:

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

Using SCSS:

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

If you use Mobiscroll on a simple HTML page, include the legacy stylesheet directly in your HTML file:

<link href="css/mobiscroll-legacy.min.css" rel="stylesheet" type="text/css">

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.

Datepicker​

Changed​

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

Removed​

We removed the weeks option. Use calendarSize instead.

mobiscroll.datepicker('#myID', {
  weeks: 6
}

Agenda​

We performed a cleanup and standardization of renderer 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 renderEvent option to renderAgendaEvent.
We renamed the renderEventContent option to renderAgendaEventContent.
We renamed the renderDay option to renderAgendaDay.

mobiscroll.eventcalendar('#myID', {
  renderEvent: myRender
});

Eventcalendar​

We performed a cleanup and standardization of renderer 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 renderLabel option to renderCalendarEvent.
We renamed the renderLabelContent option to renderCalendarEventContent.
We renamed the renderEvent option to renderPopoverEvent.
We renamed the renderEventContent option to renderPopoverEventContent.
We renamed the renderDay option to renderCalendarDay.
We renamed the renderDayContent option to renderCalendarDayContent.

mobiscroll.eventcalendar('#myID', {
  renderLabel: myRender
});

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 renderer 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 renderScheduleEvent option to renderSchedulerEvent.
We renamed the renderScheduleEventContent option to renderSchedulerEventContent.
We renamed the renderDay option to renderSchedulerDay.
We renamed the renderDayContent option to renderSchedulerDayContent.

mobiscroll.eventcalendar('#myID', {
  renderScheduleEvent: myRender
});

We also renamed the schedule view to scheduler:

mobiscroll.eventcalendar('#myID', {
  view: { schedule: { type: 'day' } }
});

Timeline​

We performed a cleanup and standardization of renderer 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 renderScheduleEvent option to renderTimelineEvent.
We renamed the renderScheduleEventContent option to renderTimelineEventContent.
We renamed the renderDay option to renderTimelineDay.

mobiscroll.eventcalendar('#myID', {
  renderScheduleEvent: myRender
});

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

mobiscroll.eventcalendar('#myID', {
  view: { timeline: { type: 'day', eventList: true } }
});

Removed​

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

mobiscroll.eventcalendar('#myID', {
  view: { timeline: { type: 'day', resolutiuon: 'hour' } }
});