Updated on Sep 09, 2021

Modern jQuery event calendar

Use it in responsive mobile & desktop web apps with jQuery

Responsive calendar
Turn Drag & Drop ON/OFF
Drag & Drop ready
Daily or weekly schedule
Visit the scheduler
Customizable week-view
Event list - daily, weekly, monthly...
Visit the agenda

The calendar view supports everything from single to multiple week views all the way to month grids with various ways to render events.
The three views - scheduler, calendar, agenda - can be combined to create the perfect user experience on mobile, desktop and everything in-between.

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

As part of Event calendar and scheduler it can be picked up with the Framework and Complete licenses or with the component license.

jQuery Calendar Calendar for jQuery and jQuery Mobile

Calendar - Mobile month view

Change demo
Mobile month view
Download and try example

Use the event calendar for mobile, desktop and everything in-between. The content perfectly fills the parent container or the mobile screen in full width. You can chooose to render an agenda below the calendar broken up into days ordered chronologically. All of this is configured in the view option.

You can use the calendar and agenda together or separately. For more ways to use the agenda learn about how to configure it.

Interested to see how the event calendar looks on largers screens with labels?  Check out the next demo →

Calendar - Desktop month view

Change demo
Desktop month view
Download and try example

Desktops or larger screens provide more space, which means you can use not just the horizontal but vertical space as well. Horrizontally the calendar grows to fill the full width of the parent container while the height can be adjusted through the height option.

The number of visible labels are determined by the available space and the ones that don't fit will be shown in a popover. To save vertical space you can show all events in a popover.

Interested to see how the event calendar looks on smaller screens?  Check out the previous demo →

Calendar - Responsive

Change demo

The event calendar is fully responsive. It adapts to the available space and fills the screen to look good everywhere. While the you don't have to worry about the width the height can be manually adjusted with the height option.

Use the responsive option to configure how the calendar behaves on different sized screens. The responsive option is equipped with five breakpoints - xsmall (up to 575px), small (up to 767px), medium (up to 991px), large (up to 1199px), xlarge (from 1200px). Custom breakpoints can be added if necessary: my-custom-breakpoint: { breakpoint: 600 } (from 600px up to the next breakpoint).

Change the viewport

Calendar - Events as labels

Change demo

Events can be displayed in a couple of different ways. Most of the time showing the event data inside and across the calendar cells is the way to go. When configuring the calendar object, you can set labels: true. All of this happens under the view option.

The number of visible labels are determined by the available space and the ones that don't fit will be shown in a popover. To save vertical space you can show all events in a popover.

Rather show events in a pop-over?  Take a look at the next example →

Calendar - Events in popover

Change demo
Events in popover
Download and try example

Besides displaying events as labels, you can have them show up in a pop-over. Set it up though the calendar: {popover: true} object inside the view option. Using the popover setting saves vertical space and provides a subtle cue to the user that there are events. A small dot will apear in day cells with events or if calendar: {count: true} is set, an event count is displayed.

The same popover is rendered when events are displayed as labels and not all fit vertically in the calendar day cells.

Interested in customizing how the events look?  Take a look at how you can do it →

Calendar - Custom event order

Change demo
Custom event order
Download and try example

When rendering events, they follow the same order: all-day events at the top followed by everything else sorted by startTime. Events with the same start are ordered alphabetically by title.

The default logic can be overriden using the eventOrder option which expects a function that compares two events and returns an order (-1 or 1). This can be useful in scenario where rendering PROPOSED vacation at the top followed by APPROVED time off is more useful.

Calendar - Timezones

Change demo

The event calendar works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of the two external libraries: luxon or moment-timezone. For installing and using these libraries check out this guide.

There are two angles regarding timezones:

  • dataTimezone - the calendar expects this format and returns this format. It is 'local' by default if the date-times don't contain any timezone information
  • displayTimezone - the calendar displays the events in this timezone. The date-times will be converted from the dataTimezone and displayed accordingly. It is 'local' by default
Enable switching the timezone in the UI?  Learn how to dynamically change timezones →

Calendar - Switching timezones

Change demo
Switching timezones
Download and try example

If the context requires users being able to change the timezone on the fly, you can add a custom dropdown with the desired timezones to the event calendar header. This can be of course placed externally to the calendar as well, eg. setting page.

Set the timezone of the incoming data through the dataTimezone - eg. 'utc', and set the display timezone thorugh the displayTimezone - eg. 'America/Los_Angeles'

Calendar - Month or week view

Change demo
Month or week view
Download and try example

The calendar view supports variable weeks. Save space by only displaying one or two weeks or go for a full month where it makes sense. Use the weeks setting that expects a number of rows. The default is six weeks, but feel free to play around.

Calendar - Colored backgrounds

Change demo
Colored backgrounds
Download and try example

Color the background of the days with the colors option. You can specify backgrounds as exact dates, ranges or set up recurring rules. The recurring object works the same way as for the events.

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

Want to color time ranges & days in the scheduler?  Learn how to do it →

Calendar - Switching views

Change demo

Dynamically switch views within one calendar instance. Use a UI control to let users do the switching or do it programatically. This example features a segmented component inside the header, but the live option changes can be invoked from anywhere.

Switch between a month view with a monthly agenda, a week view with a weekly agenda and daily event list. Use the setOptions method to dynamically update any option.

Calendar - Custom event labels

Change demo
Custom event labels
Download and try example

You can customize the look of the labels and show addtional content besides the event.title. There are two approached you can take:

  • Only customize the content of the labels - For this you will want to use the renderLabelContent option. The color and positioning of the label will be handled by the calendar. The title and any other custom fields you want to show inside the label is your responsability.
  • Fully customize how the labels look (like in this example) - Use the renderLabel option. All original event fields along with computed fields like isMultiDay, lastDay can be leveraged for constructing the render function. With the renderLabel you will have full control over how the labels are styled including things like color, title and any custom fields.

Calendar - Custom events in popover

Change demo
Custom events in popover
Download and try example

The events listed in the popover can be customized in two ways:

  • Full event customization (like in this example) - The calendar handles the rendering of events in the correct order. Styling the content, colors and everything else is your responsability.
  • Content customization - The calendar prints the start and end times, allDay and sets the appropriate color. Content like title and other fields can be shown.

You can provide styling to the title field and any other custom fields like description, location, participants ...

Pass a rendering function to the renderEventContent option. All original event fields along with computed fields like isMultiDay, lastDay are passed to the function. For a fully custom event rendering use the renderEvent option.

If you add custom markup you will want to add styling too. Use the popoverClass under the view option to tell the calendar what CSS class it should append to the popover container so that you can write specific CSS rules.

Calendar - Customizing the header

Change demo
Customizing the header
Download and try example

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

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 →

Calendar - Move, resize & create

Change demo
Move, resize & create
Download and try example

Drag & drop is a core feature of the event calendar and it is composed of four sub-features:

  • Click to create events - double click to create events. This can be turned off or set to single click
  • Drag to create events - tap/click to start creating an event and drag to the desired length
  • Move events - grab an event and move it wherever needed
  • Resize events - change the length of en event, grab it from either end and resize it

You have granular control over features through the clickToCreate, dragToCreate, dragToMove and dragToResize options, which are false by default.

Events can be marked as fixed by setting their editable property to false. This turns delete, drag & drop move and resize off for the event.

Calendar - Manage blocked out dates

Change demo
Manage blocked out dates
Download and try example

Entire days and ranges can blocked out to manage event creation and editing more efficiently.

To disable specific or recurring days you can pass an array to the invalid option. A couple of examples:

  • To disable weekends, use the recurring object - recurring: { repeat: 'weekly', weekDays: 'SA,SU' }
  • Disable a specific range - { start: new Date(2020, 11, 19), end: new Date(2020, 11, 20) }

When dragging events onto disabled days, they will automatically be denied and onEventCreateFailed/ onEventUpdateFailed events will be triggered, from which custom logic can be executed to show a toast or maybe a modal for data correction. The built-in logic of how the calendar handles validation on user interaction can be controlled through the invalidateEvent option:

  • 'strict' - Strict being the default, no event overlap is allowed with invalid ranges.
  • 'start-end' - With start-end validation the calendar checks if the start or end of the event coincides with any invalid range. Other overlaps are allowed.

If you're interested in invalids for a given range (including recurring occurrences), you can use the getInvalids function.

Calendar - External drag and drop

Change demo
External drag and drop
Download and try example

Events can be created and scheduled by dragging and dropping an external resource onto the calendar. In order for that to work you will need to have two things set up:

  • Enable the calendar to receive external events by setting externalDrop to true.
  • Initialize the external events (containers) as draggable components.

Set up a container as draggable with the mbsc-draggable attribute. Pass a skeleton event definition through the data-drag-data attribute as a stingified json object. This will be added to the event calendar on drop. If omitted, a default event will be created. For a more programmatic approach you might want to use the component initialization where the draggable is initialized in js code and the dragData can be passed as an object.

Learn more from the external drag & drop documentation.

Use the onEventCreate and onEventCreateFailed for triggering a custom logic on drop like showing a toast. The appropriate lifecycle event will be triggered if the drop is successful or fails.

Looking for external drag with the scheduler?  Check out this example →

Calendar - External d&d presets

Change demo
External d&d presets
Download and try example

Use external draggable events to create preset tasks that people can quickly copy and spawn events from. A great example is a car wrapping shop where different jobs need to be set up depending on the type of vehicle.

Print a list of predefined tasks and initialize them as draggable elements. Enable externalDrop for the calendar and set up the predefined event skeletons for the draggable component.

Whenever there is more information to be captured, like a detailed task notes, customer information, the name of the technician... you can trigger a popup with the task form in the onEventCreate lifecycle event. For failed drops (trying to schedule a task during lunch breaks or weekends) the onEventCreateFailed event will be triggered.

Want to see how external presets look & feel for a scheduler?  Check out this example →

Calendar - Event properties

Change demo

The event data structure for the calendar 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
  • 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
  • resource - Links the event to one or more resources. Expects a list of IDs part of the resources array.
  • editable - Denotes if the event is editable. If set true, the event cannot be dragged, resized or deleted even if globally enabled

Calendar - Supported date formats

Change demo
Supported date formats
Download and try example

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

Calendar - 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 occurence 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 →

Calendar - Loading inline data

Change demo
Loading inline data
Download and try example

What is an event calendar 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 probabaly 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 event calendar.

Do you want to learn about the event data sctructure?  See how the event object is built →

Calendar - Events from remote API

Change demo
Events from remote API
Download and try example

The calendar 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 calendar understands.

Interested in load on demand?  Dynamically load events on month change →

Calendar - Loading events on demand

Change demo
Loading events on demand
Download and try example

The event calendar 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 →

Calendar - Events from Google calendar

Change demo
Events from Google calendar
Download and try example

Event data can be loaded from remote sources. Even if initially you don't get it in the same format the calendar understands, you can easily convert it. Set the base properties and custom fields and let the calendar render the events or create custom event templates.

In this example you'll see how you can load events from a public calendar using the googleSDK. Make sure to set your API key and Client ID, that you can get from here.

When trying locally please make sure to run this demo on a local webserver, otherwise data won't load from the Google calendar.

Calendar - Add/edit/delete events

Change demo
Add/edit/delete events
Download and try example

After looking at the different operations of event creation, edit/update and delete it all can be all put together in a choesive example.

Create new events

Drag to create and click to create is enabled. Events can be created by dragging or with double click. As soon as the initial posion is confirmed, a temporary event is created and a custom edit dialog is shown for refinement. On cancel the temporary event will be removed and on confirmation the event will stay in the calendar.

Edit existing events

Drag to resize and drag to move is enabled. Events can be reordered and resized. In addtion to that, clicking on the event will open a custom dialog that enables editing the various properties.

Delete events

Delete can be implmented inside the edit dialog with a button. It's just a matter of removing it from the data object. If a dialog is not shown on click, focused events can be deleted with the backspace and delete keys.

Interested in adding recurrence configuration?  Check out the next example →

Calendar - Recurring event editor

Change demo
Recurring event editor
Download and try example

As seen in the previous example, an add/edit from can be created with custom and base event fields. While the CRUD example features delete with undo, this example shows off how to build a fully customizable recurrence editor right in the add/edit screen.

Above some common presets, like Daily, Weekly on X day, Monthly on Xth, Annually on the same day, Every Weekday a fully custom recurrence editor is implemented.

Copy & paste or delve into the code and understand how to generate recurrence objects or RRULES as seen in this live rule builder.

Calendar - In-header filtering

Change demo
In-header filtering
Download and try example

The header of the event calendar 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 .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 style and reorder the header?  Take a look at the previous example →

Calendar - Theming capabilities

Change demo
Theming capabilities
Download and try example

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

  • Base themes: Choose between iOS, 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.

Calendar - Localization

Change demo

The components are fully localized. In case of the event calendar 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 overriden  See what options the localization impacts →

Calendar - Calendar systems

Change demo

The event calendar 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 inlcuded within the Farsi language pack
  • Hijri - it is included in the Arabic language pack
Interested in localization?  Explore this example →

Calendar - Lifecycle events

Change demo

The event calendar 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 →

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 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?
Simple two minute install guide for jQuery and jQuery Mobile
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.

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.

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.

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.

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 figure 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

Copy command $ mobiscroll config react --version=5

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

Copy the code into your app

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

Copy JSX
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.

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 figure 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

Copy command $ mobiscroll config ionic --version=5

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

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.

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 figure 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

Copy command $ mobiscroll config angular --version=5

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

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.

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 figure 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

Copy command $ mobiscroll config ionic --version=5

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

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.

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
Mobiscroll
Mobiscroll Dark
Material
Material Dark
iOS
iOS Dark
Windows
Windows Dark
Language Locale
See other demos and change options
Theme
Locale
See other demos