Mobiscroll components are defined as ES6 modules with dependencies defined, so they can be used as such. The advantage of this is that you don't need to build your Mobiscroll package manually, you include the full source code in your application and import the necessary components in your source code. When your application is built, only the source code of the imported components (and their dependencies) will be included in the bundle.

ES6 modules are only available with the "Complete" license, which includes the full, unminified source code, or with the Basic and Framework licenses with the optional source code add-on.

Depending on which framework you use for your project, there are differences on how to set up the ES6 modules. Please choose your framework below and follow the instructions in the example.

Choose example

Example CLI App for Angular

Prerequisites

To demonstrate the usage of the ES6 modules we will use the angular cli to create an app.
The Mobiscroll source code can be downloaded from the download page, selecting the uncompressed version.

This guide assumes you have the angular cli installed. If not, visit the angular docs on how to get started with angular.

When creating your app please select the SCSS stylesheet format when prompted (starting from version 4.7.0 the Mobiscroll stylesheets are written in SCSS - but more on that later).
The following command will create the angular app:

ng new my-app

Setting up the App

After the app is createad, the js, scss and fonts folders have to be extracted and copied over from the downloaded package to the src/lib/mobiscroll folder of your app. Make sure the existing folder structure is kept. Here's how the app structure should look after the setup:

The folder structure of the angular app*

/
|--e2e
|--node_modules
|--src/
  |--app
    |--app.component.html
    |--app.component.ts
    |--app.module.ts
  |--assets
  |--environment
  |--lib
    |--mobiscroll
      |--fonts
      |--js
      |--scss
  |--index.html
  |--styles.scss
|--package.json
|--tsconfig.json

*Above are shown only the files and folders that are most relevant to this guide.

Paths shortcut

The following addition to the tsconfig.json file will make the mobiscroll module paths more simple.

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "@mobiscroll/*": [
        "src/lib/mobiscroll/js/*"
      ]
    },
    // ... 
  }
}

Adding the path to the js folder in compilerOptions, will enable the use of '@mobiscroll' shortcut instead of the whole relative paths.

Mobiscroll Modules

All of the mobiscroll controls have a module for them. For example all that's related to the calendar, like the <mbsc-calendar> component or the [mbsc-calendar] directive, are located in the MbscCalendarModule. So when a component needs to be used inside a module, the module of that component has to be imported and added to the imports array.

For example, to use the calendar component in the app.component, the MbscCalendarModule has to be imported and added to the app.module.ts.
The same is true for the Mobiscroll Form. Here's how to load both modules:

app.module.ts

import { MbscCalendarModule } from '@mobiscroll/calendar.angular';
import { MbscFormsModule } from '@mobiscroll/forms.angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MbscCalendarModule,
    MbscFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mbsc-form>
    <mbsc-calendar>My Birthday</mbsc-calendar>
</mbsc-form>

Mobiscroll is built using JavaScript, HTML and CSS. For the JavaScript (TypeScript in this case) and HTML part this will do just fine, but the components also need the stylesheets.

Styles

The Mobiscroll styles are located in the scss folder and they need to be imported in the global styles, in order for them to be applied.

For the above example, we need to load the styles for the calendar and the forms. For each theme that is included in the package, there is a file in the component's folder with the name of the component and the theme. In this example we will import two themes, the mobiscroll and the ios theme:

src/styles.scss

/* You can add global styles to this file, and also import other style files */
/* Import Mobiscroll component styles for each theme */
@import 'lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import 'lib/mobiscroll/scss/calendar/calendar.ios';

@import 'lib/mobiscroll/scss/forms/forms.mobiscroll';
@import 'lib/mobiscroll/scss/forms/forms.ios';

The icons required for the package are located in the fonts folder. There's an scss variable that needs to be set to find the font, and it's called $mbsc-font-path

src/styles.scss

/* Set the font path first */
/* Use the following font path in case of, angular 9 and below */
$mbsc-font-path: 'lib/mobiscroll/fonts/';
/* Use the following font path in case of angular 10 and up */
$mbsc-font-path: '~/lib/mobiscroll/fonts/';

/* Import Mobiscroll component styles for each theme */
@import 'lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import 'lib/mobiscroll/scss/calendar/calendar.ios';

@import 'lib/mobiscroll/scss/forms/forms.mobiscroll';
@import 'lib/mobiscroll/scss/forms/forms.ios';

At this point building and running the app, should work, and the mobiscroll components should show up using the default mobiscroll theme.

To use the auto-theme and/or custom built themes, they also need to be loaded.
Light or dark variants of the themes (ios-dark, material-dark, mobiscroll-dark) are present in the scss/themes folder and contain the colors for all the components so only one scss file needs to be imported. The same applies for custom themes built with the Theme Builder. The themes have JavaScript parts too, so the scripts need to be imported as well.

Languages should be loaded from the i18n folder of the Mobiscroll source.

Here's an example how to load and use Spanish and Italian languages and ios, material and auto themes. Also their dark variants, and a custom theme called "my-custom-theme", that's built with the themebuilder.

app.module.ts

import { MbscCalendarModule } from '@mobiscroll/calendar.angular';
import { MbscFormsModule } from '@mobiscroll/forms.angular';

// import languages
import '@mobiscroll/i18n/es.js';
import '@mobiscroll/i18n/it.js';

// import themes (note: order matters, auto-theme should be the last one)
import '@mobiscroll/themes/ios.js';
import '@mobiscroll/themes/ios-dark.js';
import '@mobiscroll/themes/material.js';
import '@mobiscroll/themes/material-dark.js';
import '@mobiscroll/themes/my-custom-theme.js';
import '@mobiscroll/themes/auto-theme.js';

Import the scss files for the themes:

src/styles.scss

/* You can add global styles to this file, and also import other style files */
/* Import Mobiscroll component styles */
@import 'lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import 'lib/mobiscroll/scss/calendar/calendar.ios';
@import 'lib/mobiscroll/scss/calendar/calendar.material';
@import 'lib/mobiscroll/scss/forms/forms.mobiscroll';
@import 'lib/mobiscroll/scss/forms/forms.ios';
@import 'lib/mobiscroll/scss/forms/forms.material';

/* Import theme variants */
@import 'lib/mobiscroll/scss/themes/mobiscroll-dark';
@import 'lib/mobiscroll/scss/themes/ios-dark';
@import 'lib/mobiscroll/scss/themes/material-dark';

/* Import custom themes */
@import 'lib/mobiscroll/scss/themes/my-custom-theme';

At this point the app can be built and served using the angular cli. Styles will be applied automatically depending on the device the app is being ran on.

Build and run the app

ng serve

Example CLI App for Ionic v3

Prerequisites

To demonstrate the usage of the ES6 modules we will use an ionic project.
The Mobiscroll source code can be downloaded from the download page, selecting the uncompressed version.

This guide assumes you have the ionic cli installed. If not, visit the ionic docs on how to get started with ionic.

When creating the app, please select the tabs boilerplate. There's no need for the Ionic Appflow SDK, so when it's prompted, select no.
The following command will create the ionic app:

ionic start my-app

Setting up the App

After the app is created, you need to copy over the extracted mobiscroll package to the project. The js and scss folders should go under the src/lib/mobiscroll folder of the project. The fonts folder should go under the src/assets/. Make sure the existing folder structure is kept. Here's how the app structure should look after the setup:

The folder structure of the ionic app*

/
|--node_modules
|--src/
  |--app
    |--app.component.ts
    |--app.html
    |--app.module.ts
    |--app.scss
    |--main.ts
  |--assets
    |--fonts
      |--icons_mobiscroll.ttf
      |--icons_mobiscroll.woff
    |--icon
  |--lib
    |--mobiscroll
      |--js
      |--scss
  |--pages
  |--theme
  |--index.html
|--package.json
|--tsconfig.json

*Above are shown only the files and folders that are most relevant to this guide.

Mobiscroll Modules

For example, to use the calendar component in the home page component, the MbscCalendarModule has to be imported and added to the app.module.ts.
The same is true for the Mobiscroll Form. Here's how to load both modules:

app.module.ts

import { MbscCalendarModule } from '../lib/mobiscroll/js/calendar.angular';
import { MbscFormsModule } from '../lib/mobiscroll/js/forms.angular';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    MbscCalendarModule, // added
    MbscFormsModule, // added
    IonicModule.forRoot(MyApp)
  ],
  // ...

src/pages/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <mbsc-form>
    <mbsc-calendar>My Birthday</mbsc-calendar>
  </mbsc-form>
</ion-content>

Mobiscroll is built using JavaScript, HTML and CSS. For the JavaScript (TypeScript in this case) and HTML part this will do just fine, but the components also need the stylesheets.

Styles

The Mobiscroll styles are located in the scss folder and starting from version 4.7.0 they are written in SCSS. The styles needs to be imported in the global app.scss in order to work.

src/app/app.scss

/* Import Mobiscroll component styles for each theme */
@import '../lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import '../lib/mobiscroll/scss/calendar/calendar.ios';

@import '../lib/mobiscroll/scss/forms/forms.mobiscroll';
@import '../lib/mobiscroll/scss/forms/forms.ios';

The icons required for the package are located in the fonts folder. There's an scss variable that needs to be set to find the font, and it's called $mbsc-font-path. Remember that we copied the fonts to the assets folder, so that it will be copied over to the www folder, when the app is built. In this example the font path should be the following:

src/app/app.scss

/* Set font path */
$mbsc-font-path: '/assets/fonts/';

/* Import Mobiscroll component styles for each theme */
@import '../lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import '../lib/mobiscroll/scss/calendar/calendar.ios';

@import '../lib/mobiscroll/scss/forms/forms.mobiscroll';
@import '../lib/mobiscroll/scss/forms/forms.ios';

Languages should be loaded from the i18n folder of the Mobiscroll source.

Here's an example how to load and use Spanish language and the ios, material and auto themes with dark variants and a custom theme named "my-custom-theme".

app.module.ts

import { MbscCalendarModule } from '../lib/mobiscroll/js/calendar.angular';
import { MbscFormsModule } from '../lib/mobiscroll/js/forms.angular';

// import themes (order matters - auto-theme has to be the last one)
import '../lib/mobiscroll/js/themes/ios.js';
import '../lib/mobiscroll/js/themes/ios-dark.js';
import '../lib/mobiscroll/js/themes/material.js';
import '../lib/mobiscroll/js/themes/material-dark.js';
import '../lib/mobiscroll/js/themes/my-custom-theme.js';
import '../lib/mobiscroll/js/themes/auto-theme.js';

// import languages
import '../lib/mobiscroll/js/i18n/es.js';
import '../lib/mobiscroll/js/i18n/it.js';

Import the scss files for the themes:

src/app/app.scss

/* Set font path */
$mbsc-font-path: '/assets/fonts/';

/* Import Mobiscroll component styles for each theme */
@import '../lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import '../lib/mobiscroll/scss/calendar/calendar.ios';
@import '../lib/mobiscroll/scss/calendar/calendar.material';

@import '../lib/mobiscroll/scss/forms/forms.mobiscroll';
@import '../lib/mobiscroll/scss/forms/forms.ios';
@import '../lib/mobiscroll/scss/forms/forms.material';

/* Import theme variants */
@import '../lib/mobiscroll/scss/themes/mobiscroll-dark';
@import '../lib/mobiscroll/scss/themes/ios-dark';
@import '../lib/mobiscroll/scss/themes/material-dark';

/* Import custom themes */
@import '../lib/mobiscroll/scss/themes/my-custom-theme';

And done.

At this point, building and running the app with the mobiscroll package loaded should work.

ionic build
ionic serve

Example CLI App for Ionic v4/5

Prerequisites

To demonstrate the usage of the ES6 modules we will use an ionic project.
The Mobiscroll source code can be downloaded from the download page, selecting the uncompressed version.

This guide assumes you have the ionic cli installed. If not, visit the ionic docs on how to get started with ionic.

When creating the app, please select the tabs boilerplate. There's no need for the Ionic Appflow SDK, so when it's prompted, select no.
The following command will create the ionic app:

ionic start my-app

Setting up the App

The folder structure of the ionic app*

/
|--node_modules
|--src/
  |--app
    |--tab1
      |--tab1.module.ts
      |--tab1.page.html
      ...
    |--tab2
    |--tab3
    |--tabs
    |--app-routing.module.ts
    |--app.component.html
    |--app.module.ts
    ...
  |--assets
  |--environments
  |--lib
    |--mobiscroll
      |--fonts
      |--js
      |--scss
  |--theme
  |--index.html
|--angular.json
|--package.json

*Above are shown only the files and folders that are most relevant to this guide.

Mobiscroll Modules

For example, to use the calendar component in the first tab, the tab1 component, the MbscCalendarModule has to be imported and added to the tab1.module.ts.
The same is true for the Mobiscroll Form. Here's how to load both modules:

tab1.module.ts

import { MbscCalendarModule } from '../../lib/mobiscroll/js/calendar.angular';
import { MbscFormsModule } from '../../lib/mobiscroll/js/forms.angular';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    MbscCalendarModule,
    MbscFormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <mbsc-form>
      <mbsc-calendar>My Calendar</mbsc-calendar>
    </mbsc-form>
</ion-content>

Mobiscroll is built using JavaScript, HTML and CSS. For the JavaScript (TypeScript in this case) and HTML part this will do just fine, but the components also need the stylesheets.

Styles

The Mobiscroll styles are located in the scss folder and starting from version 4.7.0 they are written in SCSS. The styles needs to be imported in the global.scss in order to work.

src/global.scss

/* You can add global styles to this file, and also import other style files */
/* Import Mobiscroll component styles for each theme */
@import 'lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import 'lib/mobiscroll/scss/calendar/calendar.ios';

@import 'lib/mobiscroll/scss/forms/forms.mobiscroll';
@import 'lib/mobiscroll/scss/forms/forms.ios';

The icons required for the package are located in the fonts folder. There's an scss variable that needs to be set to find the font, and it's called $mbsc-font-path.

src/global.scss

/* Set the font path first */
/* Use the following font path in case of ionic 4 and angular 9 and below */
$mbsc-font-path: 'lib/mobiscroll/fonts/';
/* Use the following font path in case of ionic 5 and angular 10 and up */
$mbsc-font-path: '~/lib/mobiscroll/fonts/';

/* Import Mobiscroll component styles for each theme */
@import 'lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import 'lib/mobiscroll/scss/calendar/calendar.ios';

@import 'lib/mobiscroll/scss/forms/forms.mobiscroll';
@import 'lib/mobiscroll/scss/forms/forms.ios';

Here's an example how to load and use Spanish and Italian languages and ios, material and auto themes. Also with dark variants and a custom theme named "my-custom-theme".

tab1.module.ts

import { MbscCalendarModule } from '../../lib/mobiscroll/js/calendar.angular';
import { MbscFormsModule } from '../../lib/mobiscroll/js/forms.angular';

// import themes (order matters - auto-theme has to be the last one)
import '../../lib/mobiscroll/js/themes/ios.js';
import '../../lib/mobiscroll/js/themes/ios-dark.js';
import '../../lib/mobiscroll/js/themes/material.js';
import '../../lib/mobiscroll/js/themes/material-dark.js';
import '../../lib/mobiscroll/js/themes/my-custom-theme.js';
import '../../lib/mobiscroll/js/themes/auto-theme.js';

// import languages
import '../../lib/mobiscroll/js/i18n/es.js';
import '../../lib/mobiscroll/js/i18n/it.js';

Import the scss files for the themes:

src/global.scss

/* You can add global styles to this file, and also import other style files */
/* Import Mobiscroll component styles */
@import 'lib/mobiscroll/scss/calendar/calendar.mobiscroll';
@import 'lib/mobiscroll/scss/calendar/calendar.ios';
@import 'lib/mobiscroll/scss/calendar/calendar.material';
@import 'lib/mobiscroll/scss/forms/forms.mobiscroll';
@import 'lib/mobiscroll/scss/forms/forms.ios';
@import 'lib/mobiscroll/scss/forms/forms.material';

/* Import theme variants */
@import 'lib/mobiscroll/scss/themes/mobiscroll-dark';
@import 'lib/mobiscroll/scss/themes/ios-dark';
@import 'lib/mobiscroll/scss/themes/material-dark';

/* Import custom themes */
@import 'lib/mobiscroll/scss/themes/my-custom-theme';

And done.

At this point, building and running the app with the mobiscroll package loaded should work.

ionic build
ionic serve

Scheduling & calendaring

Date & time picking

Mobile UI Patterns

Docs

Community Forum

Knowledge base

Customers

Blog