Use the calendar view for both mobile and desktop or set it up responsively. The main difference between the two rendering modes - controlled by the touchUi setting - is how the calendar is laid out. When set to false the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.

Use it on any custom input or with Mobiscroll form fields. The calendar is shown on input focus, but it can also be triggered on a button click or it can be embedded directly into the page.

Let’s say you already have a form and you want to enhance date selection. You can use it on existing fields or new fields.

Use the calendar for single and multiple day selection for both desktop and mobile. Link the calendar to any field - plain HTML or styled input - or embed it right into a page. Navigate the months with the arrows or by swiping.

When linked to an input, the calendar will automatically open on focus and click. You can turn it off and only show it on a button click.

Use it on any custom input or with Mobiscroll form fields.

See how the calendar looks with different mobile rendering modes or how it looks on desktop.

Besides date-only functionality you can use the component as a combined date and time picker. Select the date from a calendar view and the time woth an hour and minute picker.

Show the date and time in localized formats or customize it to your needs. Take a look at some of the formatting options available.

Multi-date select is useful when users need to pick from a set of dates that are not necessarily in a range. Passing select: 'multiple' or a number, like select: 5 enables multiple day selection.

The latter also sets a maximum selectable, so passing select: 5 means a maximum number of five dates can be selected.

See how the calendar looks with different mobile rendering modes or how it looks on desktop.

You can select entire weeks instead of single days. This is useful when users need to select a full week instead of a variable range. It can be activated with selectType: 'week'. Single or multiple weeks can be selected based on the select: 'single','multiple' or integer setting. You can also control the day the week starts with the firstDay setting.

Use the min and max settings to restrict selection. This is useful to make picking a date faster and to reduce user errors. A great example is scheduling. You want to disable past dates and maybe enable selection from the next six months. Simply restrict values with the min and max.

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 settings. Make dates un-selectable with the invalid setting.

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.

A great example for a recurring booking is resource allocation. Take the booking of a basketball court for two hours ever Wednesday from 8PM. The example below lets you select a day of a week and an available time (served with two hour increments) and then it colors the days in a recurring manner for visibility.

The calendar can be displayed inline with one or more months or linked to an input. Explore the mobile rendering modes or see how it looks on desktop.

For additional information you can mark days with colored dots, add labels or completely color the background of the days. This offers means to add more information to the calendar that is valuable to users. Take a look at this example of marked days and description.

You can add these with exact dates, ranges, days of week, days of month and recurring dates. When processing a lot of data you can load the marked days, labels, colors dynamically in the onPageChange event.

Enable week numbers with the weekCounter setting. Counting yearly and monthly are both supported. Use it whenever it is important to users having the week number in front of them. With weekCounter: 'year' you can start the counter from the first until the last week of the year. weekCounter: 'month' restarts the counter for every month.

For a great user experience the calendar can be navigated a couple of different ways:

• By clicking or tapping on the little arrows above the calendar body
• With touchpad swipe gestures
• By grabbing and dragging the month with the mouse cursor
• With fluid swipe gestures on touchscreens

All this works in two directions: vertically and horizontally. Change the month change direction with calendarScroll: 'vertical' and calendarScroll: 'horizontal'.

The look and feel of the calendar 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.

The 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

The components are fully localized. In case of the 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.