Using Mobiscroll with the Source Code

The following guide will help in using the development packages (a.k.a. source code) of Mobiscroll.

The source code can be downloaded from the download page. If you have access to the development packages, a dropdown will be there with the compression level label. Select the development level if it's not selected already from the dropdown. After selecting the components, themes, languages and icon packs you want to include hit the download button. You will get a zip file with the source code in it.

Building the library

The development package contains the scripts and dependencies it requires to build it to an NPM package. After the library is built, it can be installed as an npm package to an Angular project.

After unzipping the downloaded package, running the following command will install the dependencies and builds the library:

$ npm start

After the library is built, a file called mobiscroll-angular-5.24.1.tgz fill be created in the dist directory.

This file is the NPM package containing the library. Copy this file to your angular project and install with the following command:

$ npm install .\mobiscroll-angular-5.24.1.tgz

The installed package is a production ready package. After installing it, you can import and use the individual modules from it:

import { MbscEventcalendarModule, MbscDatepickerModule } from '@mobiscroll/angular';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ 
    MbscEventcalendarModule,
    MbscDatepickerModule,
    FormsModule,  
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<mbsc-eventcalendar></mbsc-eventcalendar>
<mbsc-datepicker [(ngModel)]="myDate" label="My Date"></mbsc-datepicker>
<mbsc-datepicker [(ngModel)]="myRange" select="range" label="My Range"></mbsc-datepicker>