Updated on Nov 12, 2024

Modern Javascript agenda

Use it in responsive mobile & desktop web apps wherever Javascript runs.

Recurring events
Multi-day events
Popover with full event list
Drag & drop
Templating
Resource support
Customizable times
Drag & drop
Manage multiple resources
Daily, weekly or monthly timeline
Drag & drop
Customizable range
Scroll to date
Recurring events
Templating
Daily, weekly or monthly agenda

The agenda supports a configurable range listing along with daily, monthly and yearly presets.
The four views - scheduler, calendar, timeline, agenda - can be combined to create the perfect user experience on mobile, desktop and on everything in-between.

The capabilities like recurring events, all-day, multi-day events, responsiveness are supported by all views.

As part of Event calendar and scheduler it can be picked up with the Scheduling & calendaring and Complete licenses.

Javascript Agenda Agenda for Javascript

Agenda - Compact daily schedule

Change demo

With the agenda you can list out events for any range grouped by days. Use it as a stand alone UI component or combine it with a calendar week view to make navigation easier.

You can add the components - like the calendar and agenda - and configure them in the view option.

Interested to learn about the calendar view?  Check out the event calendar →
Copy code
View code on GitHub

Agenda - How to initialize

Change demo

Initialize the agenda on any div by simply calling the mobiscroll.eventcalendar('#myDiv'); function. You can pass the options as an object: ... .eventcalendar('#myDiv', { theme: 'ios', view: { agenda: {type: 'month' } } });

The events can be passed in a couple of different ways. In this example we are loading them through an external API.

Interested to learn about the calendar view?  Learn how to set up the range the agenda covers →

Agenda - Customize the range

Change demo

Use the agenda object inside the view option to configure the agenda. type and size can be set as follows:

  • day - agenda: { type: 'day', size: 20 } can be configured for a single day or a range of days
  • week - agenda: { type: 'week', size: 3 } can be configured for a single or multiple weeks
  • month - agenda: { type: 'month' } can be configured for one or more months
  • year - agenda: { type: 'year' } can be configured for one or more years
Interested in combining this with a calendar view?  Check out the previous example →

Agenda - Show empty days

Change demo

By default, the agenda doesn’t render days with no events. However, in some cases, you might want to display headers for empty days, especially when you want to add extra functionalities for those days or make it easier to schedule future events. In such cases, you can use the showEmptyDays property under the view.agenda option.

Interested in how to customize the day headers?  Check out this example →

Agenda - Print mode

Change demo

The agenda includes print optimized styling through the print add-on. This needs to be added to the download package or installed separately from a dedicated NPM package.

Print styling is applied when print is called on a page that contains the agenda. In addition to that, you can call the print method on the instance which grabs only the markup of the agenda places it onto a temporary page and calls the browsers printing function. This is especially useful when you want to add a button to only print the agenda rather than the whole page.

Besides printing, PDF export is possible through the print dialog of the browser.

The print module is not available in the trial. You can try the live demo to see how it looks.

Agenda - Custom event order

Change demo

When rendering events, the default logic determines the order:

  • All-day events are placed at the top
  • Non-all-day events follow, sorted by their start times
  • Events with the same start time are ordered alphabetically by their title

The order property of the event data can be used to override the default ordering. The order property takes precedence over the default rules. If two events have the same order value, the default rules apply. For a more advanced order logic, the eventOrder option can be used which expects a function that compares two events and returns an order (-1 or 1).

Do you want to learn about the event ordering?  Learn more about it in the documentation →
Copy code
View code on GitHub

Agenda - Timezones

Change demo
Javascript agenda with data and display timezone. Set the timezone your data is in and list events in any timezone. Plain JS api for usage everywhere.

Agenda - Event search with popup

Change demo

Use the available real estate in the calendar header to add event search. With the templating capabilities of the header you can easily add a search box and use a separate agenda instance to show the search results. This example is relying on a single API endpoint for getting the data onto the primary view and also for getting the filtered data based on the search terms.

Events can be filtered in real time so using an agenda view for the search results is an easy choice. It provides all the necessary styling and advanced features that you might need to customize the experience.

Alternatively, search can be implemented in a sidebar next to the event calendar using a similar search box with an inline agenda instead of a dropdown.

Copy code
View code on GitHub

Agenda - External navigation

Change demo

This example demonstrates how can the Agenda navigated externally. Here we have a two-pane layout with a Datepicker on the left and an Agenda on the right. Changing date on the Datepicker will trigger the date change on the Agenda.

The Datepicker calls the navigate method of the Agenda in its event, while the Agenda sets the datepicker value with the setVal method from its onSelectedDateChange event.

Copy code
View code on GitHub

Agenda - Content customization

Change demo

Above the built in look & feel, the events can be customized in two ways:

  • Full event customization - The agenda handles the listing and ordering of the events, while the full styling falls into your hands. Explore this example for more details.
  • Content-only customization (like in this example) - When customizing only the content, the calendar handles the event start and end times, allDay and color rendering.

You will have to place and provide styling to the title field and any other custom fields you are using, like description, location, participants. You can add custom functionality, buttons and other custom components.

Pass a rendering function to the renderEventContent option. All original event fields along with computed fields like isMultiDay, lastDay can be used inside the function.

Copy code
View code on GitHub

Agenda - Full event customization

Change demo

Above the built in rendering mode you can either customize the full event or just the content of the event. If we break up the event into pieces there are four fields that we are interested in:

  • The event start and end time
  • Whether it is an allDay event or not
  • The event color
  • The event title

If you would like to keep the styling of the start/end times, allDay and color you will want to customize the content only, not the full event. In case of the full event customization the agenda takes care of positioning the event container and everything else is your responsibility.

You will have to place and provide styling to all event fields. Beside the ones mentioned above you'll be able to render other custom fields, like description, location, participants ...

Pass a rendering function to the renderEvent option. All original event fields along with computed fields like isMultiDay, lastDay are available in the function.

Copy code
View code on GitHub

Agenda - Customizing the calendar header

Change demo

You can customize how the header of the agenda looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between agenda and calendar.

Use the renderHeader option for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:

  • Navigation component - <div mbsc-calendar-nav></div>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <button mbsc-calendar-today></button>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <button mbsc-calendar-prev></button>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <button mbsc-calendar-next></button>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the renderHeader. This example sets a consistent order and layout across all themes and shows a custom control at the far right end.

Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .md-header-filter-prev { order: 1; }
.mbsc-material .md-header-filter-next { order: 2; }
.mbsc-material .md-header-filter-controls { order: 3; }
.mbsc-material .md-header-filter-today { order: 4; }
Want to add a filter to the header?  Check out the next example →
Copy code
View code on GitHub

Agenda - Customizing the day header

Change demo

You can use renderDay to set up a custom day header template. This provides flexibility to format and style the date according to your preferences, allowing further customization of the headers and ensuring a consistent layout that matches your page's overall design.

In this demo, setting the showEmptyDays property to true allows us to add functionalities to the day header, such as creating new events for empty days, which is useful in various situations.

Copy code
View code on GitHub

Agenda - Custom event tooltip

Change demo

There are several approaches to showing a tooltip when hovering events.

The native tooltip

By default, the calendar shows the browser native tooltip when hovering over the event. This includes the times and title of the event, which does the job most of the times. For showing a custom text use the tooltip property of the data object. This tooltip is specific to every event. If you want to hide the native tooltip, you can set the showEventTooltip to false.

Fully custom tooltip

Setting the showEventTooltip to false gives room for a fully custom tooltip that can be implemented by using the onEventHoverIn and onEventHoverOut lifecycle events. With the help of the Mobiscroll popup you can show a custom tooltip that holds details, actions applicable to the event it is anchored to.

Copy code
View code on GitHub

Agenda - Empty state

Change demo

Customize the look of the empty state through templating or custom render functions. Give a more purposeful feedback to the user and optionally add further actions to it. The template can be totally custom or dynamic based on any criteria.

Use the renderAgendaEmpty function for putting your custom content together.

Copy code
View code on GitHub

Agenda - In-header filtering

Change demo

The agenda doesn't have built in resource listing, however we can easily solve that inside the header using the segmented component. The header of the agenda is a canvas and an opportunity for customization. You can add custom components and enable new interaction in context.

Such an example would be a custom filter block created with the help of a segmented control and placed between the standard UI components, which are:

  • Navigation component - <div mbsc-calendar-nav></div>. Use the .md-header-filter-controls CSS class for custom overrides.
  • Today button - <button mbsc-calendar-today></button>. Use the .md-header-filter-today CSS class for custom overrides.
  • Previous month button - <button mbsc-calendar-prev></button>. Use the .md-header-filter-prev CSS class for custom overrides.
  • Next month button - <button mbsc-calendar-next></button>. Use the .md-header-filter-next CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the renderHeader.

Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. Flex layout makes reordering easy. It's just a matter of setting the order in CSS. For material use the .mbsc-material, for windows the .mbsc-windows prefix and for iOS it is .mbsc-ios class. Eg.:

.mbsc-material .mds-header-filter-prev { order: 1; }
.mbsc-material .mds-header-filter-next { order: 2; }
.mbsc-material .mds-header-filter { order: 3; }
.mbsc-material .mds-header-filter-today { order: 4; }
Want to style and reorder the header?  Take a look at the previous example →
Copy code
View code on GitHub

Agenda - Event properties

Change demo

The event data structure for the agenda is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like location, description ...

  • id - A unique ID for the event. If not specified a unique id will be generated
  • title - Defines the event text. This can be plaintext or HTML
  • tooltip - Defines the text for the tooltip which appears on mouse hover. If not specified, it will show the title and the start/end times of the event.
  • color - Defines the event color
  • start - Sets the start date and time for the event. It can be a js date object, ISO date string or moment.js object. Learn about date formats
  • end - Sets the end date and time for the event. The same formats are supported as for start
  • allDay - Configures the event as a full-day event
  • recurring - Configures the recurring rules for the event. Learn about recurring events
  • recurringException - Represents the exceptions of a recurring event, when specific dates need to be skipped from the rule.
  • recurringExceptionRule - Represents the exception rule of a recurring event, when recurring dates need to be skipped from the rule.
  • resource - Links the event to one or more resources. Expects a list of IDs part of the resources array.
  • timezone - The timezone where the event takes place. If specified, it takes precedence over the calendar's specified dataTimezone.
  • editable - Denotes if the event is editable. If set false, the event cannot be dragged, resized or deleted even if globally enabled
  • cssClass - A custom css class for the event. Useful for quick styling adjustments of the event container.
  • bufferBefore - Defines a buffer time in minutes that happens before the start of the event. This buffer area can help you visualise delays or added minutes for tasks. It is not automatically rendered in case of the agenda, but can be used in the custom template.
  • bufferAfter - Defines a buffer time in minutes that happens after the end of the event. It is not automatically rendered in case of the agenda, but can be used in the custom template.
  • order - Specifies the order of the event in the event array. Has precedence over the default ordering rules.

Agenda - Supported date formats

Change demo

Understanding how to work with dates inside the agenda is essential. You can pass to the data, marked, colors and labels in four different formats. The agenda can work with Javascript date objects, ISO strings and Moment.js objects.

Agenda - Recurrence rules

Change demo

Configure daily, weekly, monthly and yearly recurring events. On top of setting up recurrence, you can exclude specific and recurring days. This is especially useful in cases when a single occurrence of an event is deleted or is moved to a different time.

You can pass the recurrence rule in the recurring property of the event as an object or a string in RRULE format. Learn about the event data structure and where to place the recurring rules.

Use the configurator to experiment, build strings and objects that you can grab and use.

Interested in adding recurrence configuration to your UI?  Take a look at this add/edit dialog →

Agenda - Loading inline data

Change demo

What is an agenda without any events in it? To populate it with events all you have to do is pass the event array to the data option.

In a real-world scenario you would probably load the events from a remote resource or event better, load them on demand. However the point of this example is to understand how easy it is to add events to the agenda.

Do you want to learn about the event data sctructure?  See how the event object is built →
Copy code
View code on GitHub

Agenda - Events from a remote API

Change demo

The agenda can be populated by passing an array to the data option, that you can construct either inline or by getting it from a remote API. The important thing to remember is that events need to be in a format that the agenda understands.

Interested in load on demand?  Dynamically load events on month change →
Copy code
View code on GitHub

Agenda - Loading events on demand

Change demo

The agenda supports remote and local data sources. Besides that, events can be populated on initialization or loaded on demand.

Getting the events in real time as the user navigates improves load performance and always serves the most recent data.

Use the onPageLoading lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.

Interested in loading events from Google Calendar?  Show events from Google Calendar →
Copy code
View code on GitHub

Agenda - Sync events to google calendar

Change demo

The event calendar comes with third party calendar integration support through the integration plugin. This needs to be added to the download package or installed separately from a dedicated NPM package.

It includes everything you need to authenticate your users, get their Google calendars and provides functions for CRUD operations. It takes care of loading the events and converts them to the required format so that they can be displayed on the Mobiscroll calendar separately or mixed with other calendars and events.

Customizing the interaction, event workflows, whether the events are read-only is up to you. In this live demo, newly created events will land in the primary calendar of the authenticated user.

This example uses the integration plugin to connect to and load events from Google Calendar and it is not available in the trial. Give the live demo a try and see how it can be configured.
Copy code
View code on GitHub

Agenda - Sync events to outlook calendar

Change demo

The event calendar comes with third party calendar integration support through the integration plugin. This needs to be added to the download package or installed separately from a dedicated NPM package.

It includes everything you need to authenticate your users, get their Outlook calendars and provides functions for CRUD operations. It takes care of loading the events and converts them to the required format so that they can be displayed on the Mobiscroll calendar separately or mixed with other calendars and events.

Customizing the interaction, event workflows, whether the events are read-only is up to you. In this live demo, newly created events will land in the primary calendar of the authenticated user.

This example uses the integration plugin to connect to and load events from Outlook Calendars and it is not available in the trial. Give the live demo a try and see how it can be configured.
Copy code
View code on GitHub

Agenda - Load events from public google calendar

Change demo
Load events from public google calendar
Get started with the agenda View code on GitHub

Event data can be loaded from remote sources, like public google calendars. Through the integration plugin you can easily show events that are available in a public calendar. The integration plugin needs to be added to the download package or installed separately from a dedicated NPM package.

You will just need the CALENDAR_ID and an apiKey from google and you should be ready to roll.

Public calendars are read-only. If you are interested in syncing private google calendars with read/write/delete access, check out this example.

This example uses the integration plugin to connect to and load events from Google Calendar and it is not available in the trial. Give the live demo a try and see how it can be configured.
Copy code
View code on GitHub

Agenda - Multiple select & bulk operations

Change demo
Multiple select & bulk operations
Download and try example View code on GitHub

Multiple event selection can be turned on with the selectMultipleEvents option. Selecting multiple events can be done through user interaction with CTRL/SHIFT/CMD + click or programmatically eg. click of a button or 'select all' checkbox.

Bulk operations like delete, update can be applied the selected events. Things like deleting with the backspace or delete buttons work out of the box but custom actions can be also applied. The selection can be easily retrieved and updated with the getSelectedEvents and setSelectedEvents method.

Custom actions can be performed with external buttons or with context menu activated on right-click.

Copy code
View code on GitHub

Agenda - Theming capabilities

Change demo

The look and feel of the agenda can be deeply customized. There are four levels of customization:

  • Base themes: Choose between Mobiscroll, iOS, Android Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

Agenda - Lifecycle events

Change demo

The agenda ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like onEventClick, onInit, onSelectedDateChange ... will be triggered.

For a complete list of events go to the documentation  See available lifecycle events →

Agenda - Calendar systems

Change demo

The agenda supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:

  • Gregorian - it is included by default
  • Jalali - it is the default system of the Persian calendar and is included within the Farsi language pack
  • Hijri - it is included in the Arabic language pack
Interested in localization?  Explore this example →

Agenda - Localization

Change demo

The components are fully localized. In case of the agenda this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

All settings can be manually overridden  See what options the localization impacts →
Copy code
View code on GitHub

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Already have an account?
Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Vue

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic Vue

Give the components a try locally and see how they look in your project.

Already have an account?
Simple two minute install guide for jQuery
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folder into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this.

Copy code <link href="css/mobiscroll.jquery.min.css" rel="stylesheet" />
<script src="js/mobiscroll.jquery.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide for Javascript
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

Alternatively you can run the example using our demo app.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file

Copy code <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" />
<script src="js/mobiscroll.javascript.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config react

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

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.

Copy the code into your app

Grab the relevant parts and drop them into your JSX and CSS files.

Copy JSX
Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ npm start in the root folder of your app

Copy command $ npm start

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

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.

Copy the code into your app

Grab the relevant parts and drop them into your TSX and CSS files.

Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config angular

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

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.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's style.css or style.scss.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ng serve in the root folder of your app

Copy command $ ng serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

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.

Copy the code into your app

Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's global.scss file.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Vue project

Run the following command in the root folder of your Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config vue

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

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.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to configure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Ionic Vue project

Run the following command in the root folder of your Ionic Vue project.

Don't have a project? Try it with our demo app.

Copy command $ mobiscroll config ionic

You will be prompted to log in with your mobiscroll account. Set your password here.

Working behind a proxy?

If you're working behind a proxy server, additional configuration might be needed. Please check the proxy configuration options in the documentation.

Using a CI/CD workflow?

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.

Copy the code into your app

Grab the relevant parts and drop them into your Vue page.

Copy
Take a look at what you've accomplished

Run $ npm run dev in the root folder of your app

Copy command $ npm run dev

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

Keep things running smoothly

We have sent an email with verification instructions to you. Please make sure to follow the steps and verify it's you.

In case you fail to verify the account, the trial will be interrupted.

If you have any trouble

Don't hesitate to let us know.

install-help-bck
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Demos
Theme Select
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos