Using Mobiscroll with the Source Code
The following guide will help in using the development packages (a.k.a. source code) of Mobiscroll.
You can find more details on licenses on the pricing page.
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.28.3.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.28.3.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>