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.

Usage in Create React App based applications

Prerequisites

To demonstrate the usage of the ES6 modules we will use the create-react-app 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 create-react-app cli installed. If not, visit the Create React App github page on how to get started with the cli.

The following command will create the React app:

$ create-react-app my-app

After creating your app please make sure to install node-sass to ensure that your app supports scss. (starting from version 4.7.0 the Mobiscroll stylesheets are written in SCSS). You'll find more information about how can you install the node-sass module here.

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:

/
|--node_modules
|--public
|--src
  |--lib
    |--mobiscroll
      |--fonts
      |--js
      |--scss
  |--App.js
  |--App.scss
  |--index.js
  |--index.scss
|--package.json

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

For example, to use the calendar component in the App.js, the mobiscroll variable has to be imported to that component. Also the related component styles needed to be imported as well. The same is true for the Form and any other Mobiscroll component. Here's how to load both components:

App.js

import React from 'react';

// import Calendar and Form components
import mobiscroll from './lib/mobiscroll/js/calendar.react.jsx';
import './lib/mobiscroll/js/forms.react.jsx';

// Import themes
import './lib/mobiscroll/js/themes/material';
import './lib/mobiscroll/js/themes/material-dark';
import './lib/mobiscroll/js/themes/ios';
import './lib/mobiscroll/js/themes/ios-dark';
import './lib/mobiscroll/js/themes/auto-theme';

// Import languages
import './lib/mobiscroll/js/i18n/de';
import './lib/mobiscroll/js/i18n/es';
import './lib/mobiscroll/js/i18n/zh';

import './App.scss';

function App() {
  return (
    <div className="App">
      <mobiscroll.Form>
        <label>
            Birthday
            <mobiscroll.Calendar theme="auto" />
        </label>
      </mobiscroll.Form>
    </div>
  );
}
export default App;

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.

App.scss

/* Set the font path first */
$mbsc-font-path: '../../fonts/';

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

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

Build and run the app

npm start

Usage in other React based applications

To demonstrate the usage of the ES6 modules we will use the following directory structure. Copy the downloaded Mobiscroll source code to the lib/mobiscroll folder, making sure the existing folder structure is kept.

/
|--dist/
    |--bundle.js
    |--bundle.css
|--js/
    |--app.jsx
|--lib/
    |--mobiscroll/
|--styles/
    |--style.scss
|--index.html
|--.babelrc

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mobiscroll</title>
    <link href="dist/bundle.css" rel="stylesheet">
</head>


<body>
    <div id="content"></div>
</body>

</html>

Loading components

All components are located in the root of the Mobiscroll source code folder.

Every component exports the main mobiscroll object as default, so import the main mobiscroll object from any of the first loaded component. Subsequent components will be attached automatically to the main object.

Themes should be loaded from the themes folder of the Mobiscroll source. To use the auto theme feature (choosing theme automatically based on platform) make sure to import all themes for the platforms you'd like to support, after that import the auto-theme module.

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

app.jsx


import React from 'react';
import ReactDOM from 'react-dom';

// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.react';
import '../lib/mobiscroll/js/forms.react';

// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/material-dark';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/ios-dark';
import '../lib/mobiscroll/js/themes/auto-theme';

// Import languages
import '../lib/mobiscroll/js/i18n/de';
import '../lib/mobiscroll/js/i18n/es';
import './/lib/mobiscroll/js/i18n/zh';


class Form extends React.Component {
    render() {
        return (
            <mobiscroll.Form theme="auto">
                <div className="mbsc-form-group-inset">
                    <label>
                        Name
                        <input name="username" />
                    </label>
                    <label>
                        Email address
                        <input name="email" type="email" />
                    </label>
                    <label>
                        Password
                        <input name="password" type="password" data-password-toggle="true" />
                    </label>
                    <label>
                        Birthday
                        <mobiscroll.Date theme="auto" lang="es" />
                    </label>
                </div>
                <div className="mbsc-form-group-inset">
                    <button className="mbsc-btn-block" type="submit">Create account</button>
                </div>
            </mobiscroll.Form>
        );
    }    
}

ReactDOM.render(
    <Form />,
    document.getElementById('content')
);

The above code needs to be transpiled to ES5 code in order to run in the browser. There are various module bundlers out there to help you with that. Read on to see how to do this with some of the popular module bundlers (webpack, Rollup, Browserify).

Loading styles

Styles are written in Sass and are also modular. In our styles.scss file we import the themes for the components we're using.

/* Specify font icon path */
$mbsc-font-path: './fonts/';

/* Import required themes for each component */
@import '../lib/mobiscroll/scss/datetime/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms/forms.ios.scss';

/* Import custom themes */
@import "../mobiscroll/scss/themes/mobiscroll.scss"
@include mbsc-custom-theme('mobiscroll-red', 'mobiscroll', ('background': #f7f7f7, 'text': #454545, 'accent': #e61d2a));

Compiling the Sass styles to css might vary depending on the build system you're using for your app. If you're not using any yet, you can simply compile it from command line, assuming Sass is installed.

node-sass styles/style.scss dist/bundle.css

Some javascript module bundlers (like webpack or Rollup) support importing the styles in the javascript source code through plugins and extensions. See examples below.

Webpack

Install webpack

npm install --save-dev webpack webpack-cli

Install babel-loader to transpile ES6 code

npm install --save-dev babel-core babel-preset-es2015 babel-preset-react babel-loader@7

In this example we're using css-loader and sass-loader to import the styles directly in the javascript source, the extract-text-webpack-plugin to bundle the styling in a separate css file, and file-loader for the font icon files.

npm install --save-dev style-loader css-loader sass-loader file-loader node-sass extract-text-webpack-plugin@next

Import component files, theme files and the style file in the javascript source.

app.jsx


import React from 'react';
import ReactDOM from 'react-dom';

// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.react';
import '../lib/mobiscroll/js/forms.react';

// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';

// Import styles
import './styles/style.scss';


class Form extends React.Component {
    render() {
        return (
            <mobiscroll.Form theme="auto">
                <div className="mbsc-form-group-inset">
                    <label>
                        Name
                        <input name="username" />
                    </label>
                    <label>
                        Email address
                        <input name="email" type="email" />
                    </label>
                    <label>
                        Password
                        <input name="password" type="password" data-password-toggle="true" />
                    </label>
                    <label>
                        Birthday
                        <mobiscroll.Date theme="auto" />
                    </label>
                </div>
                <div className="mbsc-form-group-inset">
                    <button className="mbsc-btn-block" type="submit">Create account</button>
                </div>
            </mobiscroll.Form>
        );
    }    
}

ReactDOM.render(
    <Form />,
    document.getElementById('content')
);

Import component styles in the style.scss file.

style.scss

/* Specify font icon path */
$mbsc-font-path: './fonts/';

/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';

Configuration file for webpack

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './js/app.jsx',
    output: {
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.jsx$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract(['css-loader'])
        }, {
            test: /\.scss/,
            use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
        }, {
            test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
            use: 'file-loader'
        }]
    },
    plugins: [
        new ExtractTextPlugin('bundle.css')
    ]
};

We will also need the .babelrc configuration file in the project root.

.babelrc

{ "presets": [ "es2015", "react" ] }

Run webpack to create the bundles.

npx webpack

Rollup

Install Rollup

npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve

Install rollup-plugin-babel and babel-preset-es2015-rollup to transpile ES2015 code.

npm install --save-dev rollup-plugin-babel rollup-plugin-replace babel-preset-es2015-rollup babel-preset-react

In this example we're using the rollup-plugin-sass plugin to be able to import the styling in the javascript source.

npm install --save-dev rollup-plugin-sass

Import component files, theme files and the style file in the javascript source.

app.jsx


import React from 'react';
import ReactDOM from 'react-dom';

// Import components
import mobiscroll from '../lib/mobiscroll/js/datetime.react';
import '../lib/mobiscroll/js/forms.react';

// Import themes
import '../lib/mobiscroll/js/themes/material';
import '../lib/mobiscroll/js/themes/ios';
import '../lib/mobiscroll/js/themes/auto-theme';

// Import styles
import './styles/style.scss';


class Form extends React.Component {
    render() {
        return (
            <mobiscroll.Form theme="auto">
                <div className="mbsc-form-group-inset">
                    <label>
                        Name
                        <input name="username" />
                    </label>
                    <label>
                        Email address
                        <input name="email" type="email" />
                    </label>
                    <label>
                        Password
                        <input name="password" type="password" data-password-toggle="true" />
                    </label>
                    <label>
                        Birthday
                        <mobiscroll.Date theme="auto" />
                    </label>
                </div>
                <div className="mbsc-form-group-inset">
                    <button className="mbsc-btn-block" type="submit">Create account</button>
                </div>
            </mobiscroll.Form>
        );
    }    
}

ReactDOM.render(
    <Form />,
    document.getElementById('content')
);

Import component styles in the style.scss file.

style.scss

/* Specify font icon path */
$mbsc-font-path: './fonts/';

/* Import component styles */
@import '../lib/mobiscroll/scss/datetime.material.scss';
@import '../lib/mobiscroll/scss/forms.material.scss';
@import '../lib/mobiscroll/scss/datetime.ios.scss';
@import '../lib/mobiscroll/scss/forms.ios.scss';

Configuration file for Rollup

rollup.config.js

import sass from 'rollup-plugin-sass';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';

export default {
    entry: 'js/app.jsx',
    dest: 'dist/bundle.js',
    format: 'iife',
    plugins: [
        nodeResolve({
            jsnext: true
        }),
        replace({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        commonjs({
            include: 'node_modules/**'
        }),
        sass({
            output: 'dist/bundle.css'
        }),
        babel({
            exclude: 'node_modules/**'
        })
    ]
};

We will also need the .babelrc configuration file in the project root.

.babelrc

{ "presets": [ "es2015-rollup", "react" ] }

Run Rollup to create the bundles, using the -c option to use the configuration file.

./node_modules/.bin/rollup -c

Browserify

Install Browserify

npm install --save-dev browserify

Install babelify and babel-preset-es2015 to transpile ES2015 code.

.babelrc

npm install --save-dev babel-preset-es2015 babel-preset-react babelify

We will also need the .babelrc configuration file in the project root.

.babelrc

{ "presets": [ "es2015", "react" ] }

Run Browserify to create the bundles

./node_module/.bin/browserify js/app.js -t babelify --outfile dist/bundle.js

Scheduling & calendaring

Date & time picking

Mobile UI Patterns

Docs

Community Forum

Knowledge base

Customers

Blog