Using Mobiscroll components as ES6 modules
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.
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:
/
|--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:
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 { }
<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:
/* 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
/* 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.
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:
/* 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.
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:
/
|--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
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 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:
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)
],
// ...
<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.
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:
/* 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:
/* 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';
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
language and the ios
, material
and auto
themes with
dark variants and a custom theme named "my-custom-theme".
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:
/* 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
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
|--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
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 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:
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 {}
<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.
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:
/* 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
.
/* 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';
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.
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".
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:
/* 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