--- title: "Vue Calendar Date Picker Component | Mobiscroll" component: "Calendar" framework: "Vue" library_version: "6.2.0" url: "https://demo.mobiscroll.com/vue/calendar" --- # Responsive Vue calendar and date picker Vue calendar and date picker for inline and form input use — supports single, multiple & range selection, validation, min/max, and disabled dates. For Vue and Nuxt. Last update: Oct 30, 2026 Highly customizable mobile & desktop calendar for **Vue** and **Ionic Vue** ## 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/vue/calendar/mobile-desktop-usage.md) - Set the Vue date picker to render in touch-optimized or desktop mode — link to a form input, trigger from a button, or embed it inline. - [Input Field or Inline Embed](https://demo.mobiscroll.com/vue/calendar/usage-on-input-or-inline.md) - Attach the Vue calendar date picker to a form input or embed it inline without an input — supports generated and custom inputs. - [Responsive Calendar](https://demo.mobiscroll.com/vue/calendar/responsive.md) - A Vue 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/vue/calendar/mobile-desktop-display.md) - Choose between inline, anchored, top, bottom, or center display modes for the Vue date picker — switch between mobile and desktop rendering. ## Common use cases - [Appointment Booking](https://demo.mobiscroll.com/vue/calendar/appointment-booking.md) - Build booking date selection interfaces with an inline Vue calendar — show per-day prices and disable fully booked dates for appointment flows. - [Custom Day Cells](https://demo.mobiscroll.com/vue/calendar/activity-calendar.md) - Add custom activity indicators, availability markers, or daily metrics to each day cell in the inline Vue calendar date picker. ## Configuring the calendar - [Date Picker](https://demo.mobiscroll.com/vue/calendar/date-picker.md) - Embed an inline monthly calendar in a Vue date picker for single-date selection — ideal for booking forms and reservation interfaces. - [Date & Time Picker](https://demo.mobiscroll.com/vue/calendar/date-time-picker.md) - Select a date and time side-by-side with the Vue date picker — use the scroller for exact times or time grid for 30-minute appointment slots. - [Week View](https://demo.mobiscroll.com/vue/calendar/week-view.md) - Display 1, 2, or 3 weeks inline in a Vue date picker — switch between week and month views dynamically without recreating the component. - [Multiple Months](https://demo.mobiscroll.com/vue/calendar/multiple-months.md) - Show fixed or auto-fit months in the Vue date picker for travel, booking, and long-range date selection. - [Quarter and Year View](https://demo.mobiscroll.com/vue/calendar/quarter-year-view.md) - A Vue 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/vue/calendar/week-to-month.md) - Show week and month calendar views in the Vue date picker — add a header view switcher so users can toggle between layouts. - [Colored Dots, Highlights & Labels](https://demo.mobiscroll.com/vue/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/vue/calendar/month-change-direction-week-numbers-outer-days.md) - Configure a Vue 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/vue/calendar/single-select.md) - Pick a single date in an inline Vue calendar date picker and pair it with a scroller or time-slot time picker for booking and reservation. - [Multi-Date Selection](https://demo.mobiscroll.com/vue/calendar/multiple-select.md) - Let users pick multiple dates in a Vue date picker. Set min and max selection counts and show a live counter in the header. - [Week Picker](https://demo.mobiscroll.com/vue/calendar/week-select.md) - Pick a full week or a custom number of weeks in a Vue date picker — configure the first day and selection size (1, 2, or 3 weeks). - [Date Range Picker](https://demo.mobiscroll.com/vue/calendar/range-select.md) - Select a start/end date range from an inline Vue calendar — set custom labels, range highlighting, and min/max range for booking or reservation. - [Date Formats](https://demo.mobiscroll.com/vue/calendar/date-object-ISO-8601-moment.md) - Use a Vue calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects. - [Formatting Values](https://demo.mobiscroll.com/vue/calendar/formatting-return-values.md) - Customize how dates and times appear in Vue date picker inputs — set custom date and time formats or inherit them from locale settings. - [Programmatic Value Control](https://demo.mobiscroll.com/vue/calendar/setting-values-defaults.md) - Set a default date or update the Vue date picker value programmatically — via bound state or custom buttons. - [Timezone Configuration](https://demo.mobiscroll.com/vue/calendar/setting-the-picker-timezone.md) - Configure data and display timezones in the Vue date picker — with Luxon, Day.js, or moment-timezone. ## Validation & restricting selection - [Min & Max Date Restrictions](https://demo.mobiscroll.com/vue/calendar/min-max-restrictions.md) - Restrict selectable dates and times in the Vue date picker with min and max values — for appointment booking, travel, or registration forms. - [Disable & Validate Dates](https://demo.mobiscroll.com/vue/calendar/disabled-invalid-values.md) - Restrict selectable dates in a Vue calendar date picker using recurring dates and min/max limits — for appointment booking and leave forms. - [Recurring Date Rules](https://demo.mobiscroll.com/vue/calendar/recurring-values.md) - Configure recurring date rules in a Vue 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/vue/calendar/themes-ios-material-windows.md) - Style the Vue 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/vue/calendar/customizing-header.md) - Customize the Vue 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/vue/calendar/customize-marked-day-shapes.md) - Add custom-shaped day markers to a Vue calendar date picker — use the marked option for colored dots, then override styles. - [Day Cell Custom Styling](https://demo.mobiscroll.com/vue/calendar/half-day-styling.md) - Apply custom CSS classes to the Vue date picker day cells to style date ranges, recurring dates, or individual days. ## Localization & tapping into the lifecycle - [Event Hooks](https://demo.mobiscroll.com/vue/calendar/event-hooks.md) - See which lifecycle events fire as users interact with the Vue date picker — in a live event log section, showing callback timing. - [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/vue/calendar/gregorian-jalali-hijri.md) - Use the Vue calendar date picker with Gregorian, Jalali (Persian), and Hijri (Arabic) calendar system support for regional date selection. - [Localization](https://demo.mobiscroll.com/vue/calendar/localization.md) - Localize a Vue date picker across 37 languages — configure regional date/time formats, RTL layout, and button labels, with manual overrides. - [Right-to-Left](https://demo.mobiscroll.com/vue/calendar/rtl-right-to-left.md) - Use the Vue calendar date picker with RTL support — enable right-to-left layout or inherit it from locale settings for Arabic, Hebrew, or Farsi.