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

The calendar can be used on a Mobiscroll input or any other input part of an existing form.

There are two ways to use the calendar:

• Initialize it on a single input, either Mobiscroll or non-Mobisroll input.
• Embed the picker without an input. This can be the page itself or a more complex popup

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 rendering and pointer optimized desktop rendering. It can be dynamically switched with the help of the responsive option.

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.

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 pricing, available spots on demand and show it as labels that help people book the appointment.

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

The date picker ships with five 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
• timegrid - renders a time grid for time selection
• 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.

The date picker ships with five 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
• timegrid - renders a time grid for time selection
• 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.

For a time grid use the controls: ['timegrid'] instead of 'time'.

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.

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.

The passed date-times can also contain timezone data which requires a timezonePlugin to be interpreted correctly. Check out how timezones work in the calendar.

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.

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

• Set a month change direction - specify 'hoizontal' or 'vertical' in the calendarScroll option
• Set the first day of the week - specify the first day of the week using the firstDay option, where Sunday is 0, Monday is 1, etc.
• 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

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 submitted 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.

Week selection can be configured by setting the select to 'preset-range'.

Control the parameters of the selection:

• Define the first day of the selection - Set it in the firstSelectDay option. It can be different than the firstDay of the week set in localization
• Define the number of days - The selectSize option can be any number, where 3 means three days, 7 means a week and 14 means two weeks

To enable range selection set the select option to range.

The microcopy for rangeStartLabel and rangeEndLabel can be easily overridden. For flight booking "Outbound" and "Return" makes sense while for accommodation 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 maximum 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.

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.

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 a rule in the recurring property under the invalid, marked, colors or labels options. Exceptions for specific and recurring days can be configured.

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

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.

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 renderCalendarHeader 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>
• Today button - <button mbsc-calendar-today></button>
• Previous month button - <button mbsc-calendar-prev></button>
• Next month button - <button mbsc-calendar-next></button>

The default shape of day marks are dots. If 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.

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 labels.

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.

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 included within the Farsi language pack
• Hijri - it is included in the Arabic language pack

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.

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