Getting started with Mobiscroll for JavaScript
Depending on the target project, the Mobiscroll library can be installed into:
- A web application with module loaders (like webpack or similar app building tools)
- Simple HTML web pages (with script and link tags)
For simple web pages the Mobiscroll CLI is not required and you can follow the install guide for web pages.
To install the Mobiscroll library to your web application, you will need the Mobiscroll CLI.
Install the CLI
Install the Mobiscroll CLI from NPM (you'll only have to do it once).
npm install -g @mobiscroll/cli
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:
- You can try Mobiscroll for free.
- 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.
- 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 javascript --trial
- Do not run
npm login—mobiscroll configsets 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.
By default the CLI will install the ESM Bundle of the trial package. You might need to register components for the auto-initialization feature to work.
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 javascript
- Do not run
npm login—mobiscroll configsets 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.
If you're working behind a proxy, additional configuration might be needed. Please check the proxy configuration options of the CLI.
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/javascript/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.
By default the CLI will install the ESM Bundle. You might need to register components for the auto-initialization feature to work.
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 . .
# ...
It is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.
Installing manually
A downloaded package can be installed into a webapp with module loaders as well as a simple web page by including the code into the html.
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 javascript --no-npm
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/javascript/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.
Web pages
To include a downloaded package to a simple website, unzip the contents of the downloaded zip file. Copy the css and js folders to your project, next to your html file. A script and a stylesheet will need to be included into the html like this:
<!-- Include Mobiscroll -->
<script src="js/mobiscroll.javascript.min.js"></script>
<link href="css/mobiscroll.javascript.min.css" rel="stylesheet" type="text/css">
Then you can use the initialization functions from the mobiscroll namespace:
mobiscroll.eventcalendar('#my-div', {
view: { scheduler: { type: 'day' }},
});
mobiscroll.datepicker('#my-other-div', {
select: 'range',
});
Would you like to use Mobiscroll as an ESM (ECMAScript Module) bundle to reduce the bundle size? It's possible, read this guide on how to make it work.
