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

# Multiple Months - jQuery Calendar demo

Show fixed or auto-fit months in a JQuery calendar date picker — switch between month and week view. For jQuery or jQuery Mobile.

- [Live demo](https://demo.mobiscroll.com/jquery/calendar/multiple-months)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/datepicker/calendar/multiple-months)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/multiple-months.md), [Angular](https://demo.mobiscroll.com/angular/calendar/multiple-months.md), [React](https://demo.mobiscroll.com/react/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/jquery/datepicker/api#opt-calendarType) is set to `'month'` the month count can be set through the [`pages`](https://mobiscroll.com/docs/jquery/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/jquery/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

```js
$('#picker').mobiscroll().datepicker({
    calendarType: 'month',
    pages: 1
});
```

With "Two months":

```js
$('#picker').mobiscroll().datepicker({
    calendarType: 'month',
    pages: 2
});
```

With "3 months":

```js
$('#picker').mobiscroll().datepicker({
    calendarType: 'month',
    pages: 3
});
```

With "Auto":

```js
$('#picker').mobiscroll().datepicker({
    calendarType: 'month',
    pages: 'auto'
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-display) - option
- [`calendarType`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-calendarType) - option
- [`pages`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-pages) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  $('#demo-1-month')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      calendarType: 'month',
      pages: 1,
    });

  $('#demo-2-months')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      calendarType: 'month',
      pages: 2,
    });

  $('#demo-3-months')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      calendarType: 'month',
      pages: 3,
    });

  $('#demo-auto')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      calendarType: 'month',
      pages: 'auto',
    });
});
```

### HTML

```html
<div id="demo-1-month"></div>
<div id="demo-2-months"></div>
<div id="demo-3-months"></div>
<div id="demo-auto"></div>
```

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

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 jquery --trial`.

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

## Related demos

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