General Date & Time pickers Event Calendar Form components Responsive list Numeric pickers Pickers & dropdowns Layout & navigation Tools Accessibility

Install Mobiscroll in your web or mobile app

Installing Mobiscroll only takes a couple of minutes. Once the right resources are included, you’ll be able to initialize and use Mobiscroll controls.

Start a trial

First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.

This is how the free trial works:

  1. You can try Mobiscroll for free.
  2. The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
    Read about the differences between trial and licensed products.
  3. You can upgrade to the licensed product at any time during or after your trial.

Enter your first name, set a password and you're ready to go!

Pick the Framework you are using and hit the big blue button to download the trial. Select

Here is how to install the trial in your local project

Step 1: Install the Mobiscroll CLI and configure the app

Install Mobiscroll CLI from NPM (you'll only have to do it once).

$ npm install -g @mobiscroll/cli

Run mobiscroll config angular in your terminal window.

$ mobiscroll config angular --version=4
If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.
The package will be installed from a private npm registry, which requires authentication. If your project uses a CI/CD workflow, read this guide on how to make it work.
Please note if you are using Angular-cli based app running the above command is the only step you need. The Mobiscroll-cli takes care of the project setup.
If you are using other angular base app, the mobiscroll config angular command will only help installing the Mobiscroll npm package. You will need to follow the next steps below.

Step 2. Load the stylesheets

Copy the code snippet with the CSS include and paste it to your index file. (This step may depend on your project's configuration. If your project has a specific css include location, then add the resource location there.)

<link href="/node_modules/@mobiscroll/angular/dist/css/mobiscroll.min.css" rel="stylesheet" />

Step 3. Import the mobiscroll module

To import Mobiscroll, open app/app.module.ts and add the following statement after the other imports.

import { MbscModule } from '@mobiscroll/angular';
import { FormsModule } from '@angular/forms';

Also add the MbscModule and the FormsModule to the imports enumeration

  imports: [
  // ...
export class AppModule { }

Finally, try and see if you installed it correctly by initializing a control. You’ll see a simple example with HTML and JS code that you’ll have to copy to your local file. Or you can grab the code from below. If you don't have a test file at hand, just download it from the same place.

<input id="calendar" [(ngModel)]="calendar" mbsc-calendar="calendarSettings" placeholder="Please select..." />
import { Component, ViewChild } from '@angular/core';
  selector: 'demo-app',
  templateUrl: './app.component.html',
export class AppComponent {
    calendar: Date;

Starter projects

Grab starter projects for plain Javascript, jQuery, jQuery Mobile, Angular, Ionic and React and jump into development. The packages contain real world examples and work with both the trial and licensed product. Feel free to modify the code to fit your needs by grabbing demos and browse the developer documentation.