Initializing components
Levi Kovacs avatar
Written by Levi Kovacs
Updated over a week ago

Depending on your framework of choice - the flavor of Mobiscroll you are using - controls are usually initialized on an existing HTML element. That is usually an input or select, but it can be anything from a div to an ordered/unordered list.

For Javascript

The anatomy of the initialization consists of a function call which determines the type of control you are creating, a selector of the element you are initializing it on and the options you are passing.

HTML

<input id="calendar"/>

JS

mobiscroll.calendar('#calendar', {
    theme: 'ios',
    display: 'center',
    lang: 'de'
});

See examples and learn more in the Getting started with Mobiscroll for Javascript.

For jQuery

Very similar to the plain Javascript initialization.

HTML

<input id="calendar"/>

JS

$("#calendar").mobiscroll().calendar({
    theme: 'ios',
    display: 'center',
    lang: 'de'
});

See examples and learn more in the Getting started with Mobiscroll for jQuery.

For Angular

The initialization is done through the directive.

HTML

<div ng-app="demoApp" ng-controller="demoController">
    <input ng-model="mycalendar" mobiscroll-calendar="settings" mobiscroll-instance="demo" />
</div>

JS

$scope.settings = {
    theme: 'ios',
    display: 'center',
    lang: 'de'
};

See examples and learn more in the Getting started with Mobiscroll for Angular.

For React

Can be used like any other custom component with all the options and configurations that are needed for the desired outcome.

JSX

<mobiscroll.Calendar 
    ref="calendar"
    theme="ios"
    display="center"
    lang="de"
/>

See examples and learn more in the Getting started with Mobiscroll for React.

What's next?

Did this answer your question?