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.