Skip to main content
All CollectionsFAQ - Frequently Asked Questions
Using Mobiscroll v4 alongside v5
Using Mobiscroll v4 alongside v5

How to use Mobiscroll v4 together with the v5 version

Istvan Halmen avatar
Written by Istvan Halmen
Updated over 2 years ago

Th 5th major version of Mobiscroll is a complete rewrite, containing components re-thought and re-built from the ground up. In the first stable release of v5 contains a limited number of components (compared to v4), so you might find yourself in the situation, where you'd like to use the new features from v5, but keep using some components from v4, which are not present in the newer version.

This step-by-step guide will show how to do this, for each available framework.

Angular

React

jQuery

Javascript

Angular

1. Install the latest v5 version using the Mobiscroll CLI:

mobiscroll config angular

Or, in case of Ionic Angular:

mobiscroll config ionic

2. Install the latest v4 version under a different alias (e.g. @mobiscroll/angular4):

npm install @mobiscroll/angular4@npm:@mobiscroll/angular@4

3. Import the style sheets for both versions in your main stylesheet (styles.css or styles.scss in case of an Angular CLI app, or global.scss in case of Ionic Angular):

@import '~@mobiscroll/angular/dist/css/mobiscroll.min.css';
@import '~@mobiscroll/angular4/dist/css/mobiscroll.min.css';

Alternatively, if you're using SCSS, you can import the scss file instead: 

@import '~@mobiscroll/angular/dist/css/mobiscroll.scss';
@import '~@mobiscroll/angular4/dist/css/mobiscroll.scss';

4. In your module files import the modules you need from each package. Remove any reference to MbscModule in your module file, since it includes all Mobiscroll components, and only import the modules of the components you need:

import { MbscEventcalendarModule } from '@mobiscroll/angular';
import { MbscTimespanModule, MbscSliderModule } from '@mobiscroll/angular4';

//...

@NgModule({

  imports: [
    // ...
    MbscEventcalendarModule,
    MbscSliderModule,
    MbscTimespanModule
  ],
  // ...
})

export class MyModule {}

React

Using npm packages

1. Install the latest v5 version using the Mobiscroll CLI:

mobiscroll confg react

2. Install the latest v4 version under a different alias (e.g. @mobiscroll/react4):

yarn add @mobiscroll/react4@npm:@mobiscroll/react@4

Or using npm:

npm install @mobiscroll/react4@npm:@mobiscroll/react@4

3. Import the style sheets for both versions:

import '@mobiscroll/react/dist/css/mobiscroll.min.css';
import '@mobiscroll/react4/dist/css/mobiscroll.min.css';

Alternatively, if you're using SCSS, you can import the scss file instead: 

import '@mobiscroll/react/dist/css/mobiscroll.scss';
import '@mobiscroll/react4/dist/css/mobiscroll.scss';

4. Import the components you need from each package:

import { Eventcalendar } from '@mobiscroll/react';
import { Timespan, Slider } from '@mobiscroll/react4';

Using the download builder

1. Download the latest v4 version. Copy the css and js folders under your project's src/lib/mobiscroll4 folder.

2. Download the latest v5 version. Copy the css and js folders under your project's src/lib/mobiscroll5 folder.

3. Import the style sheets for both versions:

import './lib/mobiscroll4/css/mobiscroll.min.css';
import './lib/mobiscroll5/css/mobiscroll.min.css';

Alternatively, if you're using SCSS, you can import the scss file instead: 

import './lib/mobiscroll4/css/mobiscroll.scss';
import './lib/mobiscroll5/css/mobiscroll.scss';

4. Import the components you need from each package:

import { Eventcalendar } from './lib/mobiscroll5/js/mobiscroll.react.min';
import { Timespan, Slider } from './lib/mobiscroll4/js/mobiscroll.react.min';

jQuery

1. Download the latest v4 version. Make sure to only include the components you wish to use from the v4 version. Copy the css and js folders to a folder in your project, e.g. lib/mobiscroll4.

2. Download the latest v5 version. Make sure to only include the components you wish to use from the v5 version. Copy the css and js folders to a folder in your project, e.g. lib/mobiscroll5.

3. Include the resources:

<!-- jQuery Include -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

<link href="lib/mobiscroll4/css/mobiscroll.jquery.min.css" rel="stylesheet">
<link href="lib/mobiscroll5/css/mobiscroll.jquery.min.css" rel="stylesheet">

<script src="lib/mobiscroll4/js/mobiscroll.jquery.min.js"></script>
<script>
  // Save the mobiscroll 4 object before loading v5
  window.mobiscroll4 = mobiscroll;
  // Save the mobiscroll 4 plugin before loading v5
  $.fn.mobiscroll4 = $.fn.mobiscroll;
</script>
<script src="lib/mobiscroll5/js/mobiscroll.jquery.min.js"></script>

4. Use the components you need:

$('#mytimespan').mobiscroll4().timespan({
  // ...
});

$('#mycalendar').mobiscroll().eventcalendar({
  // ...
})

Javascript

1. Download the latest v4 version. Make sure to only include the components you wish to use from the v4 version. Copy the css and js folders to a folder in your project, e.g. lib/mobiscroll4.

2. Download the latest v5 version. Make sure to only include the components you wish to use from the v5 version. Copy the css and js folders to a folder in your project, e.g. lib/mobiscroll5.

3. Include the resources:

<link href="lib/mobiscroll4/css/mobiscroll.javascript.min.css" rel="stylesheet">
<link href="lib/mobiscroll5/css/mobiscroll.javascript.min.css" rel="stylesheet">

<script src="lib/mobiscroll4/js/mobiscroll.javascript.min.js"></script>
<script>
  // Save the mobiscroll 4 object before loading v5
  window.mobiscroll4 = mobiscroll;
</script>
<script src="lib/mobiscroll5/js/mobiscroll.javascript.min.js"></script>

4. Use the components you need:

mobiscroll4.timespan('#mytimespan', {
  // ...
});

mobiscroll.eventcalendar('#mycalendar', {
  // ...
})

Did this answer your question?