---
title: "React Calendar Multi-Date Selection Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/calendar/multiple-select"
---

# Multi-Date Selection - React Calendar demo

Let users pick multiple dates in a React date picker. Set min and max selection counts and show a live counter in the header. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/calendar/multiple-select)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/calendar/multiple-select)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/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), [Angular](https://demo.mobiscroll.com/angular/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/react/datepicker/api#opt-selectMultiple) option to `true`.

The [`selectMax`](https://mobiscroll.com/docs/react/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/react/datepicker/api#opt-headerText) or turn [`selectCounter`](https://mobiscroll.com/docs/react/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

```jsx
<Datepicker
    controls={['calendar']}
    selectMultiple={true}
    selectCounter={true}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`selectMultiple`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectMultiple) - option
- [`selectMax`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectMax) - option
- [`headerText`](https://mobiscroll.com/docs/react/datepicker/api#opt-headerText) - option
- [`selectCounter`](https://mobiscroll.com/docs/react/datepicker/api#opt-selectCounter) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option

## Code

### JSX

```jsx
import { Datepicker, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <div>
      <Datepicker display="inline" selectMultiple={true} />
      <Datepicker display="inline" selectMultiple={true} selectMax={5} headerText="Pick up to 5 days" />
      <Datepicker display="inline" selectMultiple={true} selectCounter={true} />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => (
  <div>
    <Datepicker controls={['calendar']} display="inline" selectMultiple={true} />
    <Datepicker controls={['calendar']} display="inline" selectMultiple={true} selectMax={5} headerText="Pick up to 5 days" />
    <Datepicker controls={['calendar']} display="inline" selectMultiple={true} selectCounter={true} />
  </div>
);
export default App;
```

## 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-react.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 react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Single Date Selection](https://demo.mobiscroll.com/react/calendar/single-select.md) - Pick a single date in an inline React calendar date picker and pair it with a scroller or time-slot time picker for booking and reservation.
- Next: [Week Picker](https://demo.mobiscroll.com/react/calendar/week-select.md) - Pick a full week or a custom number of weeks in a React date picker — configure the first day and selection size (1, 2, or 3 weeks).