--- title: "JavaScript Calendar & Date Picker Component | Mobiscroll" component: "Calendar" framework: "JavaScript" library_version: "6.1.5" url: "https://demo.mobiscroll.com/javascript/calendar" --- # Advanced Javascript calendar and date picker A JavaScript calendar and date picker component — single, multiple, and range selection with desktop optimized views for booking forms and date inputs. Last update: Oct 16, 2026 Highly customizable JS mobile & desktop calendar to use wherever **Javascript** runs ## Description 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**. Capabilities like **built-in validation, minimum and maximum values and disabled dates** are supported by both the scroller and the calendar. ## Using the picker - [Touch & Desktop Layout](https://demo.mobiscroll.com/javascript/calendar/mobile-desktop-usage.md) - Set a Javascript date picker to render in touch-optimized or desktop mode — link it to an input, trigger it with a button, or embed it inline. - [Input Field or Inline Embed](https://demo.mobiscroll.com/javascript/calendar/usage-on-input-or-inline.md) - Embed a Javascript calendar date picker directly in a page or attach it to a form input — supports self-generated and custom input fields. - [Responsive Calendar](https://demo.mobiscroll.com/javascript/calendar/responsive.md) - A Javascript date picker that switches layout by screen size — bottom-sheet on mobile, popover on tablet, and inline calendar on desktop. - [Display Modes](https://demo.mobiscroll.com/javascript/calendar/mobile-desktop-display.md) - Choose between inline, anchored, top, bottom, or center display modes for a Javascript date picker — and switch between mobile and desktop rendering. ## Common use cases - [Appointment Booking](https://demo.mobiscroll.com/javascript/calendar/appointment-booking.md) - Build booking date selection interfaces with an inline Javascript calendar — show per-day prices and disable fully booked dates for appointment flows. - [Custom Day Cells](https://demo.mobiscroll.com/javascript/calendar/activity-calendar.md) - Render activity rings, availability indicators, or per-day metrics inside each day cell of an inline Javascript calendar date picker. ## Configuring the calendar - [Date Picker](https://demo.mobiscroll.com/javascript/calendar/date-picker.md) - Embed an inline monthly calendar in a Javascript date picker for single-date selection — ideal for booking forms and reservation interfaces. - [Date & Time Picker](https://demo.mobiscroll.com/javascript/calendar/date-time-picker.md) - Pick a date, time, or both with the Javascript date picker — choose from an inline calendar, scroller, or time grid in one component. - [Week View](https://demo.mobiscroll.com/javascript/calendar/week-view.md) - Display 1, 2, or 3 weeks inline in a Javascript date picker — switch between week and month views dynamically without recreating the component. - [Multiple Months](https://demo.mobiscroll.com/javascript/calendar/multiple-months.md) - Show fixed or auto-fit months in a Javascript calendar date picker — switch between month and week view. - [Quarter and Year View](https://demo.mobiscroll.com/javascript/calendar/quarter-year-view.md) - A Javascript date picker with switchable quarter and year views — select dates across a 3-month grid or all 12 months at once. - [Week & Month Views](https://demo.mobiscroll.com/javascript/calendar/week-to-month.md) - Show week and month calendar view in a Javascript date picker — add a header view switcher so users can toggle between layouts. - [Colored Dots, Highlights & Labels](https://demo.mobiscroll.com/javascript/calendar/dots-colors-labels.md) - Mark calendar dates with colored dots, background highlights, or text labels — for specific dates, date ranges, or recurring rules. - [Scroll Direction, Week Numbers & Outer Days](https://demo.mobiscroll.com/javascript/calendar/month-change-direction-week-numbers-outer-days.md) - Configure a Javascript calendar date picker — set horizontal or vertical month scrolling, show week numbers, and control whether outer days appear. ## Configuring value selection - [Single Date Selection](https://demo.mobiscroll.com/javascript/calendar/single-select.md) - Select a single date with the Javascript date picker — combine it with a scroller or time-slot picker for appointments and reservations. - [Multi-Date Selection](https://demo.mobiscroll.com/javascript/calendar/multiple-select.md) - Let users pick multiple dates in a Javascript date picker. Set min and max selection counts and show a live counter in the header. - [Week Picker](https://demo.mobiscroll.com/javascript/calendar/week-select.md) - Pick a full week or a custom number of days in a Javascript date picker — set the first day of the selection and the size (3, 7, or 14 days). - [Date Range Picker with Booking Date Validation](https://demo.mobiscroll.com/javascript/calendar/range-select.md) - Build booking date inputs with a Javascript date range picker — set min/max range, custom "Check in/Check out" labels, and toggle range highlight. - [Date Formats](https://demo.mobiscroll.com/javascript/calendar/date-object-ISO-8601-moment.md) - Use a Javascript calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects. - [Date & Time Format Customization](https://demo.mobiscroll.com/javascript/calendar/formatting-return-values.md) - Customize how dates and times appear in Javascript date picker inputs — set custom date and time formats or inherit them from locale settings. - [Programmatic Value Control](https://demo.mobiscroll.com/javascript/calendar/setting-values-defaults.md) - Set a default date and update the selected value programmatically in a Javascript date picker — via bound state, external buttons, or the API button. - [Timezone](https://demo.mobiscroll.com/javascript/calendar/setting-the-picker-timezone.md) - Set separate data and display timezones in a Javascript date picker — show dates in any timezone while storing values in UTC or local time. ## Validation & restricting selection - [Min & Max Date Restrictions](https://demo.mobiscroll.com/javascript/calendar/min-max-restrictions.md) - Restrict selectable dates and times in a Javascript date picker with min and max values — for appointment booking, travel, or registration forms. - [Disable & Validate Dates](https://demo.mobiscroll.com/javascript/calendar/disabled-invalid-values.md) - Restrict selectable dates in a Javascript calendar date picker using recurring dates and min/max limits — for appointment booking and leave forms. - [Recurring Date Rules](https://demo.mobiscroll.com/javascript/calendar/recurring-values.md) - Configure recurring date rules in a Javascript calendar — invalid, mark, color, or label dates repeating daily, weekly, monthly, or yearly, with exceptions. ## Customizing the look & feel - [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/javascript/calendar/themes-ios-material-windows.md) - Style a Javascript calendar date picker with iOS, Material, or Windows themes — switch light/dark mode, use the theme builder, or apply custom CSS. - [Custom Header](https://demo.mobiscroll.com/javascript/calendar/customizing-header.md) - Customize the Javascript date picker header — rearrange nav controls, add a today button, or add a week/month view switcher. - [Mark Days with Custom Shapes](https://demo.mobiscroll.com/javascript/calendar/customize-marked-day-shapes.md) - Add custom-shaped day markers to a Javascript calendar date picker — use the marked option for colored dots, then override styles. - [Day Cell Custom Styling](https://demo.mobiscroll.com/javascript/calendar/half-day-styling.md) - Apply custom CSS classes to Javascript date picker day cells to highlight date ranges, recurring dates, or individual days. ## Localization & tapping into the lifecycle - [Event Hooks](https://demo.mobiscroll.com/javascript/calendar/event-hooks.md) - Explore Javascript date picker lifecycle hooks — see which events fire on change, set, and init, and use the live event log to understand callback timing. - [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/javascript/calendar/gregorian-jalali-hijri.md) - Use a Javascript calendar date picker with Gregorian, Jalali (Persian), and Hijri (Arabic) calendar system support for regional date selection. - [Localization](https://demo.mobiscroll.com/javascript/calendar/localization.md) - Localize the Javascript date picker across 37 languages — set date/time formats, RTL, and button text, with manual overrides for any locale setting. - [Right-to-Left](https://demo.mobiscroll.com/javascript/calendar/rtl-right-to-left.md) - Use a Javascript calendar date picker with RTL support — enable right-to-left layout or inherit it from locale settings for Arabic, Hebrew, or Farsi.