---
title: "React Calendar Multiple Months Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/calendar/multiple-months"
---

# Multiple Months - React Calendar demo

Show fixed or auto-fit months in the React date picker for travel, booking, and long-range date selection. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/calendar/multiple-months)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/calendar/multiple-months)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/calendar/multiple-months)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/multiple-months.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/multiple-months.md), [Angular](https://demo.mobiscroll.com/angular/calendar/multiple-months.md), [Vue](https://demo.mobiscroll.com/vue/calendar/multiple-months.md)

## Description

Showing multiple months helps when people need to be looking at longer stretches of times. When the [`calendarType`](https://mobiscroll.com/docs/react/datepicker/api#opt-calendarType) is set to `'month'` the month count can be set through the [`pages`](https://mobiscroll.com/docs/react/datepicker/api#opt-pages) option. By setting `pages: 1`, `pages: 2`, the calendar will render the exact number of months regardless of the `width` of the parent container. Passing `pages: 'auto'` renders as many months as can be fitted in the parent container.

You can dynamically change the number of months or [switch between month and week view](https://demo.mobiscroll.com/react/calendar/week-to-month) without the need for recycling the whole component.

## What this demo shows

- This example demonstrate different ways to display one/two/ three or as many as fit months of calendar for date selection.
- **Month count switcher** A segmented control above the date picker switches between `1`, `2`, `3`, and `auto` month layouts, updating the calendar view dynamically.
- **Automatic month count** Setting `pages: 'auto'` displays as many months as fit within the parent container.
- **Dynamic view updates** The number of displayed months can change without recreating the date picker component.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The months can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.

## Best for

- **Travel planning** Comparing dates across adjacent months when choosing a departure or return date.
- **Accommodation and rental bookings** Choosing a booking date from a longer window without moving through one month at a time.
- **Appointment planning** Giving users a broader view when available dates are spread across several months.
- **Long-range date selection** Helping users choose deadlines, renewal dates, or future milestones without navigating one month at a time.
- **Responsive date pickers** Automatically displaying the number of months that fit the available space.

## Tutorial

### Change the month count

- (x) One month
- ( ) Two months
- ( ) 3 months
- ( ) Auto

```jsx
<Datepicker
    calendarType="month"
    pages={1}
/>
```

With "Two months":

```jsx
<Datepicker
    calendarType="month"
    pages={2}
/>
```

With "3 months":

```jsx
<Datepicker
    calendarType="month"
    pages={3}
/>
```

With "Auto":

```jsx
<Datepicker
    calendarType="month"
    pages={'auto'}
/>
```

## 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
- [`calendarType`](https://mobiscroll.com/docs/react/datepicker/api#opt-calendarType) - option
- [`pages`](https://mobiscroll.com/docs/react/datepicker/api#opt-pages) - 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" calendarType="month" pages={1} />
      <Datepicker display="inline" calendarType="month" pages={2} />
      <Datepicker display="inline" calendarType="month" pages={3} />
      <Datepicker display="inline" calendarType="month" pages="auto" />
    </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" calendarType="month" pages={1} />
    <Datepicker controls={['calendar']} display="inline" calendarType="month" pages={2} />
    <Datepicker controls={['calendar']} display="inline" calendarType="month" pages={3} />
    <Datepicker controls={['calendar']} display="inline" calendarType="month" pages="auto" />
  </div>
);
export default App;
```

## Implementation notes

- Use `controls: ['calendar']`, `calendarType: 'month'`, and `display: 'inline'`.
- Set `pages` to a number (`1`, `2`, `3`, ...) to show that many months side by side, or to `'auto'` to have the calendar fill the available container width with as many months as fit.
- `pages` can be updated at runtime via an option update on a single instance.

## 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: [Week View](https://demo.mobiscroll.com/react/calendar/week-view.md) - Display 1, 2, or 3 weeks inline in a React date picker — switch between week and month views dynamically without recreating the component.
- Next: [Quarter and Year View](https://demo.mobiscroll.com/react/calendar/quarter-year-view.md) - A React date picker with switchable quarter and year views — select dates across a 3-month grid or all 12 months at once.