---
title: "Angular Calendar Week & Month Views Example | Mobiscroll"
component: "Calendar"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/calendar/week-to-month"
---

# Week & Month Views - Angular Calendar demo

Show week and month calendar views in the Angular date picker — add a header view switcher so users can toggle between layouts.

- [Live demo](https://demo.mobiscroll.com/angular/calendar/week-to-month)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/datepicker/calendar/week-to-month)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/calendar/week-to-month.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/week-to-month.md), [React](https://demo.mobiscroll.com/react/calendar/week-to-month.md), [Vue](https://demo.mobiscroll.com/vue/calendar/week-to-month.md)

## Description

If you want to enable switching between week & month view, you can do it by adding a segmented control to the header and dynamically change the [`calendarType`](https://mobiscroll.com/docs/angular/datepicker/api#opt-calendarType) option. If you are not looking for dynamic switching you can configure a [week calendar](https://demo.mobiscroll.com/angular/calendar/week-view) or a [month calendar](https://demo.mobiscroll.com/angular/calendar/multiple-months).

## What this demo shows

- A date picker calendar with a view switcher for changing between week and month views.
- **Header and segmented control** A centered segmented control provides icon-based week and month options. It sits between the month and year quick navigation label on the left and the previous and next navigation arrows on the right.
- **Week view** The week view is selected by default and displays the current week below the header.
- **Month view** Selecting the month option displays a full month. A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. Selecting a day highlights its number with a blue background. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates the calendar to the corresponding month.

## Best for

- **Appointment booking** Let users focus on dates in the current week or switch to a month view to compare availability across a longer period.
- **Travel and accommodation date selection** Support quick near-term date choices while allowing users to scan dates across the full month.
- **Delivery and service scheduling** Help users choose an upcoming day in week view or review a broader set of available dates in month view.
- **Responsive date selection** Provide both a compact weekly layout and a broader monthly overview from the same calendar header.

## Tutorial

```html
<mbsc-datepicker
    [controls]="['calendar']"
    [calendarType]="calendarType"
    [calendarSize]="1"
    [calendarHeaderTemplate]="calendarHeader">
    <ng-template #calendarHeader>
        <mbsc-calendar-nav class="custom-view-nav"></mbsc-calendar-nav>
        <div class="custom-view">
            <mbsc-segmented-group [(ngModel)]="view" (change)="changeView()">
                <mbsc-segmented value="week" icon="material-date-range"></mbsc-segmented>
                <mbsc-segmented value="month" icon="material-event-note"></mbsc-segmented>
            </mbsc-segmented-group>
        </div>
        <mbsc-calendar-prev></mbsc-calendar-prev>
        <mbsc-calendar-next></mbsc-calendar-next>
    </ng-template>
</mbsc-datepicker>
```

```ts
view = 'week';
changeView() {
    setTimeout(() => {
        switch (this.view) {
            case 'week':
                this.calendarType = 'week';
                break;
            case 'month':
                this.calendarType = 'month';
                break;
        }
    });
}
```

```css
.custom-view {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1 0 auto;
    -moz-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;                 

    .mbsc-segmented {
        margin: 0;
    }

    .mbsc-segmented.mbsc-material,
    .mbsc-segmented.mbsc-windows {
        padding: 0 2px;
    }

    .mbsc-segmented .mbsc-segmented-button {
        padding: 0 1px;
    }

    .mbsc-segmented .mbsc-icon {
        font-size: 20px;
    }

    .mbsc-segmented-button.mbsc-windows {
        border: 0;
    }
}

.custom-view-nav .mbsc-calendar-title.mbsc-material {
    font-size: 16px;
}
```

## 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
- [`calendarType`](https://mobiscroll.com/docs/angular/datepicker/api#opt-calendarType) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option
- [`calendarSize`](https://mobiscroll.com/docs/angular/datepicker/api#opt-calendarSize) - option
- [`calendarHeaderTemplate`](https://mobiscroll.com/docs/angular/datepicker/api#template-calendarHeaderTemplate) - template

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, setOptions } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
  view = 'week';
  calendarType: any = 'week';
  changeView(): void {
    setTimeout(() => {
      switch (this.view) {
        case 'week':
          this.calendarType = 'week';
          break;
        case 'month':
          this.calendarType = 'month';
          break;
      }
    });
  }
}
```

### Template

```html
<mbsc-datepicker
  [controls]="['calendar']"
  display="inline"
  [calendarType]="calendarType"
  [calendarSize]="1"
  [calendarHeaderTemplate]="switchHeaderTemplate"
>
  <ng-template #switchHeaderTemplate>
    <mbsc-calendar-nav class="custom-view-nav"></mbsc-calendar-nav>
    <div class="custom-view">
      <mbsc-segmented-group [(ngModel)]="view" (change)="changeView()">
        <mbsc-segmented value="week" icon="material-date-range"></mbsc-segmented>
        <mbsc-segmented value="month" icon="material-event-note"></mbsc-segmented>
      </mbsc-segmented-group>
    </div>
    <mbsc-calendar-prev></mbsc-calendar-prev>
    <mbsc-calendar-next></mbsc-calendar-next>
  </ng-template>
</mbsc-datepicker>
```

### CSS

```css
.custom-view .mbsc-segmented .mbsc-icon {
  font-size: 20px;
}
```

## Implementation notes

- Use `controls: ['calendar']`, `display: 'inline'`, `calendarType: 'week'`, and `calendarSize: 1` as the starting (week) view.
- Pass `renderCalendarHeader` (Angular: `calendarHeaderTemplate`, Vue: `#header` slot) returning custom markup with `mbsc-calendar-nav` and `mbsc-calendar-prev`/`mbsc-calendar-next`.
- `calendarType` can be switched at runtime via `setOptions({ calendarType: 'week' | 'month' })` to switch between the compact weekly layout and the full month grid - `calendarSize` stays as configured and only applies while in `'week'` type.

## 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: [Quarter and Year View](https://demo.mobiscroll.com/angular/calendar/quarter-year-view.md) - An Angular date picker with switchable quarter and year views — select dates across a 3-month grid or all 12 months at once.
- Next: [Colored Dots, Highlights & Labels](https://demo.mobiscroll.com/angular/calendar/dots-colors-labels.md) - Mark calendar dates with colored dots, background highlights, or text labels — for specific dates, date ranges, or recurring rules.