The global mobiscroll object is a the place where you can set all the options that you’ll be needing across you application or page. It should contain the settings that need to be the same across all components.

As an example you can think of the theme, language and maybe default display mode. You can also override localization settings here, like dateFormat and timeFormat. These settings can of course be set on a case-by-case basis.

How a global settings object could look like:

Mobiscroll 5:

Javascript and jQuery

mobiscroll.setOptions({
     theme: 'ios',
     themeVariant: 'light',
     locale: mobiscroll.localeDe
});

React

import { setOptions, localeDe } from '@mobiscroll/react';

setOptions({
      theme: 'ios',
      themeVariant: 'light',
      locale: localeDe
});

Angular

import { setOptions, localeDe } from '@mobiscroll/angular';

setOptions({
      theme: 'ios',
      themeVariant: 'light',
      locale: localeDe
});

Mobiscroll 4:

Javascript, jQuery and AngularJS

mobiscroll.settings = {
       theme: 'ios',
       themeVariant: 'light',
       lang: 'de'
};

React

import mobiscroll from '@mobiscroll/react';

mobiscroll.settings = {
       theme: 'ios',
       themeVariant: 'light',
       lang: 'de'
};

Angular

import mobiscroll from '@mobiscroll/angular';

mobiscroll.settings = {
       theme: 'ios',
       themeVariant: 'light',
       lang: 'de'
};

What's next?

Explore the API documentation for available settings and options.