Updated on Nov 18, 2020

Responsive Angular calendar and date picker

Highly customizable mobile & desktop calendar for Angular and Ionic Angular

Range selection
Calendar view

The calendar supports single, multiple & range selection with mobile & desktop optimized rendering and interaction model.
Easily switch between dropdown and calendar view or single and range selection. Enhance the calendar with marked days or labels.

The capabilities like built-in validation, minimum, maximum values, disabled dates are supported by both the scroller and calendar.

As part of Date, time & calendar it can be picked up with the Framework and Complete licenses or with the component license.

Angular and Ionic Calendar Calendar for Angular and Ionic 2/3/4/5

Switch the layout between mobile & desktop
and see how it looks.

Calendar - Mobile & Desktop usage

Change demo
Mobile & Desktop usage
Get started with this example

Use the calendar for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.

Use the date picker on an existing form field, custom input, ion-input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

Handle different screen sizes by setting it up responsively  Check out the responsive demo →

Calendar - Initializing the picker

Change demo
Initializing the picker

The calendar component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overriden by setting the relevant options for the component.

There are three ways to use the calendar:

  • Use it on an existing input as a directive. A great example is usage on an ion-input
  • Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
  • Embed the picker without an input. This can be the page itself or a more complex popup

Calendar - Responsive behavior

Change demo

The date & time has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.

Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:

  • xsmall - min-width: 0px
  • small - min-width: 576px
  • medium - min-width: 768px
  • large - min-width: 992px
  • xlarge - min-width: 1200px
  • use custom for setting a custom breakpoint

It is a good idea to change the display or controls option to taiilor the UX. This way you can have a bottom positioned calendar on mobile, a popover anchored to the input on tablet and desktop display on large sceens.

Change the viewport

Calendar - Understanding display modes

Change demo
Understanding display modes

The date picker has five built-in display modes that can be controlled through the display option:

  • top - modal that slides down from the top
  • bottom - modal that slides up from the bottom
  • center - modal that shows up in the middle with a pop animation
  • anchored - modal that shows up anchored to an input or any dom element
  • inline - embeddable picker that is rendered into the markup without its own modal

Use the touchUi option to switch between touch optimized mobile renderign and pointer optimized desktop renderign. It can be dynamically switched with the help of the responsive oprion.

The defaults change on a theme to theme basis. The ios theme comes with bottom on mobile and anchored on desktop while the material and windows themes have center on mobile and anchored on desktop.

Want to see how to set up responsiveness?  Check out the previous example →

Calendar - Date selection

Change demo
Date selection

The date picker ships with four built-in variations for rendering the UI. The controls option supports the following:

  • date - renders a date-only scroller or dropdown control
  • time - renders a time-only scroller or dropdown control
  • datetime - renders a date & time scroller or dropdown
  • calendar - renders a calendar view for date picking

When passing controls: ['date'], the date picker will render a date-only picker - scroller for touchUi: true and a dropdown for touchUi: false.

You can further customize the dateFormat and dateWheels to fine-tune the UX... use it as a credit card expiration picker.

Interested in dynamically switching between modes?  Learn how to set up responsive behavior →

Calendar - Date & Time picker

Change demo
Date & Time picker

The date picker ships with four built-in variations for rendering the UI. The controls option supports the following:

  • date - renders a date-only scroller or dropdown control
  • time - renders a time-only scroller or dropdown control
  • datetime - renders a date & time scroller or dropdown
  • calendar - renders a calendar view for date picking

Use controls: ['datetime'] for rendering a date & time picker within the same control, tied to the same input, or use them separately for two inputs - controls: ['date'] and controls: ['time']. It will render a scrollers for touchUi: true and a dropdowns for touchUi: false.

Interested in dynamically switching between modes?  Learn how to set up responsive behavior →

Calendar - Variable week view

Change demo
Variable week view

Show a week calendar instead of a monthly calendar view to save space. By setting the calendarType to 'week' and passing the count in the weeks option you can simply enable a week view.

You can dynamically change the number of weeks or switch between month and week view without the need for recycling the whole component.

Calendar - Multi month view

Change demo
Multi month view

Showing multiple months helps when people need to be looking at longer stretches of times. When the calendarType is set to 'month' the month count can be set through the pages option. By setting pages: 1, pages: 2, the calendar will render the exact number of months regardless of the width of the parent container. Passing pages: 'auto' renders as many months as can be fitted in the parent container.

You can dynamically change the number of months or switch between month and week view without the need for recycling the whole component.

Calendar - Marked, colored & labels

Change demo
Marked, colored & labels
Get started with this example

You can highlight days, mark them with colored dots, add labels or completely color the background of the days using the marked, colors and labels options. This offers means to add more information to the calendar that could be valuable to users. While you can use the colors along with marked and labels, the latter two are mutually exclusive because they get rendered in the same place on the UI.

You can add them as exact dates, ranges or specify recurring rules. The recurring object supports different ways to describe the rules.

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.

Looking to show event data and use multiple labels?  Check out the event calendar →

Calendar - Customizing the view

Change demo
Customizing the view

The calendar view can be customized with a couple different parameters:

  • Set a month change direction - specify 'hoizontal' or 'vertical' in the calendarScroll option
  • Show week numbers - set the showWeekNumbers to true and show a week counter starting from the first week of every year
  • Hide the outer days of a month - set the showOuterDays to false in case you don't want to see days from previous and next months

Calendar - Single value selection

Change demo
Single value selection
Get started with this example

Single value selection is the default behavior of the date picker. You can explicitly enable it by setting the selectMultiple to false.

You can dynamically switch between single and multiple select or range select which helps with building a system for one-way and two-way bookings.

Looking for multiple select?  See how to enable multi-select →

Calendar - Multiple value selection

Change demo
Multiple value selection
Get started with this example

To enable multiple selection set the selectMultiple option to true.

The selectMin and selectMax options control how many values have to be and can be selected. Setting both works as a fixed selection count, which means the control can only be sumbitted if that count is met.

To customize the header you can pass a headerText or turn selectCounter on to display a localized text with the number of dates selected.

Dynamically switching between single, multiple or range select can be done with option changes.

Calendar - Range selection

Change demo
Range selection

To enable range selection set the select option to range.

The microcopy for rangeStartLabel and rangeEndLabel can be easily overriden. For flight booking "Outbound" and "Return" makes sense while for accomodation booking "Check in" and "Check out" might be more appropriate.

The range start/end labels can also be hidden in some cases if needed. Use the showRangeLabels option for that.

Furthermore, you have the option to toggle the range highlight with the rangeHighlight option, if needed.

Besides invalidating selection that is before and after a specific date, the minimum and miximum allowed length of a range selection can be enforced through the minRange and maxRange options.

Dynamically switching between single, multiple or range select can be done with option changes.

Looking for more range picker?  Learn how to customize range selection →

Calendar - Date types

Change demo
Date types

The date & time picker works with different date types:

  • JS date object - a common way of passing a date is through a Date object: new Date(1995, 11, 17, 15, 24) (make sure to not simply pass a date string to new Date())
  • ISO date string - standardized way of passing dates: '2008-09-15T15:53:00' (make sure to pass it as a string)
  • Moment.js object - a great solution that solves common date management difficulties: moment([2018, 3, 27, 12, 15]) (make sure to have moment.js loaded)

When passing dates to the component - eg. min/max, invalids - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the returnFormat option.

Calendar - Formatting values

Change demo
Formatting values

Use the dateFomat, timeFormat options to customize how the values show up in the inputs after selection. If the formats are not expicitly set, they are inherited from the localization settings.

Besides customizing the date and time formats you can reorder the time picker wheels and change its formats with the timeWheels options.

Interested in learning about localization?  Check out how the return format changes based on locale →

Calendar - Appointment booking

Change demo

Book single or multiple appointments depending on the use-case or set up recurring date and time selection. Limit the available dates with the min and max options. Make dates un-selectable with the invalid option.

Load additional information in labels that helps people book the appointment. This can be pricing, available spots or anything you would like. You can show it as labels, mark days or color days. It can be loaded on demand from an external API like in this example.

The calendar can be displayed inline with one or more months or linked to an input. Learn how to initialize the calendar.

Looking for flight or hotel booking?  Check out the range picker →

Calendar - Restricting with min & max

Change demo
Restricting with min & max

Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the min and max options to restrict the selection. Setting the values will disable dates/times earlier than min and dates/times that come after max.

By default these options are empty and the date picker supports infinite navigation, while the time picker has all 24 hours/60 minutes/... available for selection. Values can be passed as JS date objects, ISO date strings or Moment.js objects.

Looking to invalidate more dates/times?  Discover how to disable specific values →

Calendar - Disabling values

Change demo
Disabling values

Enforcing validation is essential to a great UX. First make sure to have the min & max values right and then work your way through disabled values.

Dates can be disabled through the invalid option. Another tool for setting disabled values are valid overrides. This means that you can make certain values valid from the invalid set. Eg. Invalidate all Tuesdays, but make Aug. 04, 2020 valid.

Both the invalid and valid options support the following:

  • Exact dates - Passing exact values like: '2020-05-20', '2020-05-20T12:30:00' will disable specific day and/or times
  • Date ranges - Passing start and end value pairs will disable specific days and/or times that fall into that range
  • Recurring dates - Passing recurrence rules as objects or in RRULE strring format will be parsed. For more information on recurrence check out the rule generator

Exact dates and the start/end pairs can be passed as JS date objects, ISO date strings or Moment.js objects. Having invalids set up correctly not just enhances the UX, but improves performance.

Calendar - Working with recurring values

Change demo
Working with recurring values

Disable recurring days, set marked or colored days with the help of the recurring object. Learn how to configure daily, weekly,monthly and yearly recurring dates and pass rule in the recurring property under the invalid, marked, colors or labels options.

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

Interested in disabling dates?  Discover how to invalids work →

Calendar - Theming capabilities

Change demo
Theming capabilities

The look and feel of the date picker 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 - Customizing the header

Change demo
Customizing the header

You can customize how the header of 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 week and month view.

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

  • Navigation component - <mbsc-calendar-nav></mbsc-calendar-nav>
  • Today button - <mbsc-calendar-today></mbsc-calendar-today>
  • Previous month button - <mbsc-calendar-prev></mbsc-calendar-prev>
  • Next month button - <mbsc-calendar-next></mbsc-calendar-next>

Calendar - Marked day classes

Change demo
Marked day classes

The default shape of day marks are dots. It you want to mark a day for something you can add one or more colored dots through the marked option. There are cases when you might want to change the shape of the marks or use different marks that carry specific meaning.

When you want to update the shape you can simply use CSS and override the styling: .mbsc-calendar-marks .mbsc-calendar-mark { // you custom override }.

If you need to show different shapes, you can pass a custom CSS class in the markCssClass property of the marked option. Use it to show triangles, squares and dots for different marks.

What else can you use to add extra information to the day cells?  Learn how to add labels and color days →

Calendar - Half days

Change demo
Half days

In situations when you need to style the days a little differently you'll get built-in tools for setting background color, highlight color, add day marks or lables.

But sometimes that is not enough. Luckily you can use the cellCssClass property of the colors option to pass a CSS class that will be added to the day cell and apply any custom styling you write in CSS. These days can be recurring days, ranges or individual days.

You can use the cellCssClass in combination with custom cell background to highlight a range of days and show the ends as check-in and check-out days.

Calendar - Lifecycle events

Change demo
Lifecycle events

The date picker ships with different event 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 onChange, onSet, onInit ... will be triggered.

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

Calendar - Calendar systems

Change demo
Calendar systems

The date picker 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 - Localization

Change demo
Localization

All components are fully localized. In case of the date picker 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 - RTL mode

Change demo
RTL mode

RTL support is built in and can be explicitly controlled thorugh the rtl option. If not set, it is inherited from the locale settings.

Explore the different locales  Check out this example →

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

Use it in Angular 4+ projects or use it in Ionic Angular apps.


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

Get started with Mobiscroll for React

Use it in React projects or use it in Ionic React apps.


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

Get started with Mobiscroll for Javascript

Use it wherever Javascript runs.


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

Get started with Mobiscroll for jQuery

Use it in you web app for mobile & desktop with 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 folders into your project

Extract the downloaded zip 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.

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>
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 the page 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 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.

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>
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 the page 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, Template and Module files.

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, Template and Module files.

Copy TS
Copy HTML
Copy Module
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