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