Getting started with Mobiscroll for Angular

Install the CLI

The first step you need to install the Mobiscroll library into your app is to install the Mobiscroll CLI.

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

npm install -g @mobiscroll/cli

info

On Windows client computers, the execution of PowerShell scripts is disabled by default. When using Powershell, to be able to install the Mobiscroll CLI you will need to set the following execution policy:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Make sure to read the message displayed after executing the command and follow the instructions.

Starting with the trial

Start a free trial by entering your email address on the Mobiscroll homepage and create your account. When asked, enter your first name, set a password and you're ready to go!

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.

Installing a trial package

To install the Mobiscroll Trial, you will need to open a terminal window in the root folder of you project and run the following command:

mobiscroll config angular --trial

The CLI handles everything — don't do these manually

• Do not run npm login — mobiscroll config sets up Mobiscroll's private NPM registry authentication automatically.
• Do not run npm install @mobiscroll/... — the CLI adds and installs the Mobiscroll package for you.
• Do not set up a license key manually — the CLI configures your license when you run mobiscroll config.

Installing from NPM

To install the Mobiscroll library from NPM, you will need to open a terminal window in the root folder of you project and run the following command:

mobiscroll config angular

The CLI handles everything — don't do these manually

• Do not run npm login — mobiscroll config sets up Mobiscroll's private NPM registry authentication automatically.
• Do not run npm install @mobiscroll/... — the CLI adds and installs the Mobiscroll package for you.
• Do not set up a license key manually — the CLI configures your license when you run mobiscroll config.

info

If you're working behind a proxy, additional configuration might be needed. Please check the proxy configuration options of the CLI.

Setting up for CI/CD

The config command will create a file named .npmrc in the project root, containing the access tokens to the Mobiscroll NPM registry. Commit this file into the repository to ensure the package will install for other team members and in CI/CD environments.

When used with Yarn 2 or 3, a different file is used, named .yarnrc.yml. Make sure this is also added to the repository.

When used with Docker, make sure to copy the .npmrc or .yarnrc.yml file together with package.json, to make sure that the install process will have access to the Mobiscroll NPM registry.

Here's a Dockerfile example:

FROM node:18.12.0 as build

ENV NODE_ENV production

WORKDIR /app

COPY package.json package-lock.json .npmrc ./

RUN npm install

COPY . .

# ...

info

It is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

Installing manually

On the download page a custom package can be built by picking only the components, themes, languages and additional modules you need.

When building your package, select the required components and other resources, then hit the download button.

1. Copy Mobiscroll into your app

Extract the zip file you just downloaded, then grab the js, src and css folders and copy it into src/lib/mobiscroll folder of your JavaScript app. If there is no such folder available, you can create it.

2. Run the config command

Run the config command in the root folder of your app in a terminal window.

mobiscroll config angular --no-npm

Use the components

For the components to work, you will also need to import the css file of the installed library under the node_modules folder (at @mobiscroll/angular/dist/css/mobiscroll.min.css).

If you are using SCSS, you will also find a full and a modular .scss file in the same directory.

To test the installation, add the Eventcalendar component to your main component template (for example app.component.html).

In case you installed the library from a downloaded package and did not include the Eventcalendar in the package, you can choose a different component as well.

With standalone components

app.component.html

{{title}}
<mbsc-eventcalendar [view]="calView"></mbsc-eventcalendar>

app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscEventcalendarView, MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'].
  standalone: true,
  imports: [CommonModule, MbscModule]
})
export class AppComponent {
  title = 'My Angular app';

  calView: MbscEventcalendarView = {
    schedule: {
      type: 'day'
    }
  };
}

With modules

app.component.html

{{title}}
<mbsc-eventcalendar [view]="calView"></mbsc-eventcalendar>

app.component.ts

import { Component } from '@angular/core';
import { MbscEventcalendarView } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: false,
})
export class AppComponent {
  title = 'My Angular app';

  calView: MbscEventcalendarView = {
    scheduler: {
      type: 'day'
    }
  };
}

app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MbscModule } from '@mobiscroll/angular';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    MbscModule,
    FormsModule,
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }