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

# Multiple Months - Angular Calendar demo

Show fixed or auto-fit months in a Angular calendar date picker — switch between month and week view. For Angular 22 and Ionic 8.

- [Live demo](https://demo.mobiscroll.com/angular/calendar/multiple-months)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/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), [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/angular/datepicker/api#opt-calendarType) is set to `'month'` the month count can be set through the [`pages`](https://mobiscroll.com/docs/angular/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/angular/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

```html
<mbsc-datepicker
    calendarType="month"
    [pages]="1">
</mbsc-datepicker>
```

With "Two months":

```html
<mbsc-datepicker
    calendarType="month"
    [pages]="2">
</mbsc-datepicker>
```

With "3 months":

```html
<mbsc-datepicker
    calendarType="month"
    [pages]="3">
</mbsc-datepicker>
```

With "Auto":

```html
<mbsc-datepicker
    calendarType="month"
    [pages]="'auto'">
</mbsc-datepicker>
```

## 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
- [`calendarType`](https://mobiscroll.com/docs/angular/datepicker/api#opt-calendarType) - option
- [`pages`](https://mobiscroll.com/docs/angular/datepicker/api#opt-pages) - 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
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="month" [pages]="1"></mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="month" [pages]="2"></mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="month" [pages]="3"></mbsc-datepicker>
<mbsc-datepicker [controls]="['calendar']" display="inline" calendarType="month" pages="auto"></mbsc-datepicker>
```

## 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-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: [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.
- Next: [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.