---
title: "Angular Calendar Multi-Date Selection Example | Mobiscroll"
component: "Calendar"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/calendar/multiple-select"
---
# Multi-Date Selection - Angular Calendar demo
Let users pick multiple dates in a Angular date picker. Set min and max selection counts and show a live counter in the header.
- [Live demo](https://demo.mobiscroll.com/angular/calendar/multiple-select)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/datepicker/calendar/multiple-select)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/multiple-select.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/multiple-select.md), [React](https://demo.mobiscroll.com/react/calendar/multiple-select.md), [Vue](https://demo.mobiscroll.com/vue/calendar/multiple-select.md)
## Description
To enable multiple selection set the [`selectMultiple`](https://mobiscroll.com/docs/angular/datepicker/api#opt-selectMultiple) option to `true`.
The [`selectMax`](https://mobiscroll.com/docs/angular/datepicker/api#opt-selectMax) option limits how many values can be selected.
To customize the header you can pass a [`headerText`](https://mobiscroll.com/docs/angular/datepicker/api#opt-headerText) or turn [`selectCounter`](https://mobiscroll.com/docs/angular/datepicker/api#opt-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.
## What this demo shows
- **Multiple date selection** The `selectMultiple` option lets users select more than one date in a single session.
- **Any number of dates** Without a selection limit, users can select as many dates as needed.
- **Maximum selection limit** The `selectMax` option limits the number of selected dates. Once the limit is reached, additional taps are ignored.
- **Selection counter** The `selectCounter` option displays a localized selection count, such as "3 dates selected," in the header and updates it as dates are selected.
- **Custom header text** The `headerText` option replaces the default header content with custom text, such as "Pick up to 5 days."
- **Selection without a header count** When neither `selectCounter` nor `headerText` is set, highlighted dates in the calendar grid indicate the current selection.
## Best for
- **Availability and override management** Select specific dates before applying an availability rule, exception, price override, or other configuration change.
- **Multi-date bookings and reservations** Let users book or reserve multiple non-contiguous dates in one flow.
- **Batch actions** Select a group of dates and apply one action to all of them, such as bulk scheduling or status updates.
- **Visual selection feedback** Use highlighted dates in the calendar grid as the primary indication of which dates are selected.
## Tutorial
### Customize the selection
- [ ] Select a maximum of `10` days
### Customize the header
- [x] Show a selection counter in the header
- [ ] Show `Pick up to 5 days` in the header
```html
```
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/angular/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option
- [`selectMultiple`](https://mobiscroll.com/docs/angular/datepicker/api#opt-selectMultiple) - option
- [`selectMax`](https://mobiscroll.com/docs/angular/datepicker/api#opt-selectMax) - option
- [`headerText`](https://mobiscroll.com/docs/angular/datepicker/api#opt-headerText) - option
- [`selectCounter`](https://mobiscroll.com/docs/angular/datepicker/api#opt-selectCounter) - option
## Code
### Component
```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
```
### Template
```html
```
## Implementation notes
- Use `controls: ['calendar']`, `display: 'inline'`, and `selectMultiple: true` to allow selecting more than one date.
- Options below can be updated at runtime via `setOptions` on a single instance.
- Set `defaultSelection` to an array of `Date` objects to pre-select dates on load (this demo pre-selects the 4th, 15th, and 27th of the current month).
- `selectMax` can be set to a number (e.g. `10`) to cap how many dates can be selected at once - once the cap is reached, further clicks stop adding new dates until one is deselected. Unset by default (no cap).
- `selectCounter: true` shows a "N selected" style counter in the calendar header.
- `headerText` can be set to a custom string (e.g. `'Pick up to 5 days'`) to show fixed instructional text in the header instead of a live counter.
- `selectCounter` and `headerText` both occupy the same header area, so typically only one is set at a time.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-angular.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config angular
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
ng serve
```
On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation
## Related demos
- Previous: [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.
- Next: [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).