Responsive calendar controlMake date selection great, no matter the device or screen

Provide a consistent experience
across phone, tablet and desktop

Free 10 day trial with full technical support • We'll help you get started in no time!

Mobiscroll Calendar is the responsive control for all devices
which perfectly fits into your workflow

Works across the web and hybrid apps.

Use it with plain Javascript or your favorite framework: jQuery, Angular, Ionic and React.

UnifyProvide a unified experience across devices, platforms and screens

No matter if it’s a phone, tablet or desktop your users are on, they will get the same polished experience on all.

Windows Phone

DelightHit and exceed the expectations of users

When it comes to digital products like mobile apps, the bar is high. People are used to the polished experience and
simplicity of consumer products and expect the same everywhere.

Consistent experience

Consistent experience

People expect consistency with the platform
and performance similar to apps they use every day.

CombineCombine views and enable shortcuts

Show people what they care about on the same screen and in context. Don't force unnecessary interaction on them.

Learn & ExtendGet ahead with smart defaults and extensive customization

Kickstart development with a simple API, downloadable demos and starter projects. Get premium support from the people who've actually built it.

mobiscroll.calendar('#mySelectedDate', {
    theme: 'material',
    display: 'center'
    theme: 'material',
    display: 'center'
        theme: 'material', 
        display: 'center' 
        theme: 'material', 
        display: 'center'
    [mbsc-options]="{ theme: 'material', display: 'center' }">

It’s Javascript

Build on top of the core product and fine tune to fit your exact needs. Explore the API documentation to customize the experience.

LocalizeShow localized controls in the expected format and language

Date formats are messy but dealing with them doesn't have to be hard. Get a simplified API to control date and time formats and localization settings,
with support for right-to-left languages. Pick one of the languages that come out of the box or simply add your own translation.

"We are using the Mobiscroll Calendar in one of our products.
Although it didn't come with the functionality we were looking for out of the box,
the support team went above and beyond to help me with the problem.

I was absolutely amazed by it and got so much more than I was expecting."

Tom Maddocks, Web Developer, Blueleaf

Some of the smartest companies rely on mobiscroll for their UI

With well thought out components and a lot of edge cases handled make your app feel and be top notch.

Show what's best for the device the user is on

Pick the right tool

Choose between the scroller or calendar view
depending on the context and which is best for the situation.


Help people pick a date by providing a day in week
and month view.


Help users cover bigger timespans with the date scroller.

Calendar view
Date scroller

Different display modes

Show the control in context next to the input field
and help people get through long forms faster.

Bubble display

With a familiar setting for tablet users anchoring the calendar to the
actual input doesn't break the fluidity of filling out forms.

Bubble display

Multi-month view

Help users plan better ahead with the option of showing multiple months at once. Great for larger screens like desktops and laptops.

One Two Three

Render as many months as fit on the screen or
explicitly set how many to show.

One two or three months

With over 805,000 apartments to rent, Apartment List uses the Mobiscroll Calendar to help their customers pick a move in date.

This is a crucial part in their quiz that gets shown to all of the hundreds of thousands of people going through their search process.


Help people get to the right selection faster

Unselectable days

Do whatever it takes to help people find the date they are looking for as quickly as possible. Minimize mistakes by defining what the user can and cannot select.

Grayed out dates

Dates that cannot be selected show up as grayed out
like fully booked and closed days.

Grayed out days

Enable the allowed time frame

By setting minimum and maximum dates, you can define what timeframe people can pick from.

Let users schedule checkups from tomorrow to six months ahead. Min and max options help with setting the allowed range.

From today

Setting a minimum date doesn't let users go below.

Up to 6 months ahead

Setting a maximum date doesn't let users go above.

Cover a specific range

Month and year change

Allow users to quickly get to any valid date. Tapping on the year and month will help them be quick instead of requiring swiping through every month.

Make your pick

Select month and year.

Easy access to month & year

Quickly navigate months and years.

Quick navigation

Provide single or multiple select options

Single day selection

Have the fastest and most efficient way for users to pick a single date.

View live example →

Pick the date

Quickly navigate months by swiping or tapping the arrows.

Pick the date

Multiple day selection

Allow people to pick multiple days from the same screen. Select any number or set a maximum that is accepted.

View live example →


Optionally show a selection counter.

Optional select counter

Week select

Going for a full week? Let users select an entire week at once. First day of the selection can be adjusted.

View live example →

Single interaction

Enable users to select a full week with a single interaction.

Single action week select

Personalize the experience and show what the user is interested in

Displaying additional data, marking certain dates or showing events that are important to the user can make a huge difference.

Marked days

Week numbers

Most business work with week numbers when scheduling.
Display a week in year or week in month counter.

View live example →

Week in year

Show the week number for the year.

Week in month

Show the week number for every month apart.

Week in year
Week in month

Enjoy full control over the look and feel

Fill the entire screen

Use all available space and render the calendar in fullscreen mode.

Stretch it out

Render the calendar in fullscreen when
there is a lot of data to be displayed.

Display additional data

Month change direction

The calendar can be navigated by swiping
months horizontally or vertically.
Choose whatever works best for your audience
but be consistent across your app.

View live example →

Swiping left and right

Horizontal navigation

Swiping up and down

Vertical navigation

Horizontal navigation
Vertical navigation

Align it with your product

Light or dark, whatever your theme looks like, you can customize the background, colors and other parameters with the theme builder. No extra CSS is necessary.

Customize themes

Cuztomize color parameters with the picker
or enter a color code.

See live changes

Every change you make to the theme
will instantly show up with actual controls.

Customize and see changes

Use it everywhere

Build a great app, no matter what your tech stack looks like. Open doors between teams.

Mobiscroll runs everywhere where Javascript runs, cross-platform and cross-framework. Build for iOS, Android and Windows Phone using the technologies you know and love.

Try it for free

We'll support you through the whole process of getting up & running

Join great companies who take their UI seriously


The tools you need to build delightful products

Single select

Give users the tools to quickly select a date.

Multiple select

Provide means for multiple day selection.

Week select

Let users select not just days one by one, but full weeks as well.

Month and year change

Enable users to easily change years and months without the need of consecutive swiping.

Vertical or horizontal swiping

Show what is best for your audience by using either horizontal or vertical month change.


Improve date selection on mobile, tablet and desktop with a single codebase.

Alternate scroll view

Depending on the context render a date scroller instead of the calendar view.

Fullscreen mode

Provide a fullscreen calendar experience when required.

Multi month

Help users visualize two to three months in a row by displaying multiple months.

Day description

Provide helpful information in form of text in day cells.

Marked days

Highlight dates that have a specific meaning to the users. Additionally use icons and text to give it meaning.

Week counter

Provide week in year or week in month counters for a wide range of business use cases.

Date format

Control how the date is formatted. Override localization settings if needed.

Min & max dates

Control the boundaries with min and max settings to limit the options.


Disable single days, ranges, days of week or recurring dates.


Support multi-lingual apps and serve UI with the correct culture settings.

RTL Support

Support right-to-left languages and rendering.

Cross platform

Deliver great cross-platform web and hybrid apps with adaptable themes.

Fluid UX

Provide a native-like experience with smooth animations and refined controls.


Customize the look and feel of the UI to match your brand and app.

Display modes

Show the controls in the appropriate way for the context. Top, bottom, center, inline and bubble modes available.


Embed the controls directly in forms and markup.

Event handlers

Tap into the lifecycle of the UI control by writing custom event handlers.


Support people with disabilities and right-to-left cultures with WAI-ARIA support, Section 508, and RTL rendering.

Easily add to existing projects or use it for brand new solutions

Available for plain Javascript, jQuery and jQuery Mobile, Angular JS, Angular, Ionic, React and for anywhere where Javascript runs.

All this bundled with amazing support

Talk with our incredible support staff, who is actually the same team who builds these controls.

With more than 15 million users, helps people organize their lives and get things done.

They use the Mobiscroll Calendar with Time picker in their web app to help users schedule their tasks.

Used on: DESKTOP

Simple Pricing

Per component or for the whole set of tools

Calendar license
Buy Now
License for a single component
Let people pick dates in a consistent matter on mobile and desktop
Show localized controls with the correct format and language
Support iOS, Android and Windows Phone
Support mobile web and hybrid apps
For Javascript, jQuery, jQuery Mobile, Angular, Ionic or React
Customize themes without the need for extra CSS
Community support & forums
No technical support provided
Framework license
36 UI Components
Shop Now
Get it with technical support & product maintenance

Select the framework you are interested in

Angular JS

Use Javascript when building with plain and simple JS.

Add the source code?

Looking for technical support?

Take a look at our Pro licenses with technical support from the team.
Price $95
Buy now
30 Day
Money Back
Try it RISK-FREE. If you're not extremely satisfied with our product, you'll get a full refund within the first 30 days! No questions asked!
Need a more custom solution or additional functionality? Get in touch, we can help! Explore custom development services →
Customizable demos with source available for testing and download. Try and download demos →
Browse the extensive API documentation and see how to integrate, customize and tap into the Mobiscroll API for the Calendar. Explore documentation & API reference →
Start Your Free Trial
We'll support you through the whole process of getting up & running.
"Once we started using Mobiscroll, our conversions have improved and the experience became much more delightful!"
Daniel Maldonado, Sr. Web Designer, Ecommission Financial Services
View implementation
Latest version released: v4.9.0
Released last week