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 Vue 3+ to continue using Mobiscroll. Additionally, 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​

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

Using CSS:

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

Using SCSS:

@import '@mobiscroll/vue/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.

<script setup>
import { MbscDatepicker } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';
</script>

<template>
  <MbscDatepicker
    :weeks="6"
  />
</template>

Agenda​

We performed a cleanup and standardization of slot 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 #event slot to #agendaEvent.
We renamed the #eventContent slot to #agendaEventContent.
We renamed the #day slot to #agendaDay.

<template>
  <MbscEventcalendar>
    <template #event="data">
      <!-- Template content -->
    </template>
  </ MbscEventcalendar>
</template>

Eventcalendar​

We performed a cleanup and standardization of slot 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 #label slot to #calendarEvent.
We renamed the #labelContent slot to #calendarEventContent.
We renamed the #event slot to #popoverEvent.
We renamed the #eventContent slot to #popoverEventContent.
We renamed the #day slot to #calendarDay.
We renamed the #dayContent slot to #calendarDayContent.

<template>
  <MbscEventcalendar>
    <template #label="data">
      <!-- Template content -->
    </template>
  </ MbscEventcalendar>
</template>

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 slot names. This improves consistency across components. Deprecated names are still supported for now but will be removed in a future release.

We renamed the #event slot to #schedulerEvent.
We renamed the #eventContent slot to #schedulerEventContent.
We renamed the #day slot to #schedulerDay.
We renamed the #dayContent slot to #schedulerDayContent.

<template>
  <MbscEventcalendar>
    <template #scheduleEvent="data">
      <!-- Template content -->
    </template>
  </ MbscEventcalendar>
</template>

We also renamed the schedule view to scheduler:

<template>
  <MbscEventcalendar :view="{ schedule: { type: 'day' } }" />
</template>

Timeline​

We performed a cleanup and standardization of slot 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 #event slot to #timelineEvent.
We renamed the #eventContent slot to #timelineEventContent.
We renamed the #day slot to #timelineDay.

<template>
  <MbscEventcalendar>
    <template #scheduleEvent="data">
      <!-- Template content -->
    </template>
  </ MbscEventcalendar>
</template>

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

<template>
  <MbscEventcalendar :view="{ timeline: { type: 'day', eventList: true } }" />
</template>

Removed​

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

<template>
  <MbscEventcalendar :view="{ timeline: { type: 'day', resolutiuon: 'hour' } }" />
</template>