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

# Week & Month Views - Vue Calendar demo

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

- [Live demo](https://demo.mobiscroll.com/vue/calendar/week-to-month)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/calendar/week-to-month)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/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), [Angular](https://demo.mobiscroll.com/angular/calendar/week-to-month.md), [React](https://demo.mobiscroll.com/react/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/vue/datepicker/api#opt-calendarType) option. If you are not looking for dynamic switching you can configure a [week calendar](https://demo.mobiscroll.com/vue/calendar/week-view) or a [month calendar](https://demo.mobiscroll.com/vue/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

```vue
<script setup>
const myCalendarType = ref('week')
</script>

<template>
  <MbscDatepicker :controls="['calendar']" :calendarType="myCalendarType" :calendarSize="1">
    <template #header>
      <MbscCalendarNav class="custom-view-nav" />
      <div class="custom-view">
        <MbscSegmentedGroup v-model="myCalendarType">
          <MbscSegmented value="week" icon="material-date-range"></MbscSegmented>
          <MbscSegmented value="month" icon="material-event-note"></MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev />
      <MbscCalendarNext />
    </template>
  </MbscDatepicker>
</template>
<style>
.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;
}
</style>
```

## API used in this demo

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

## Code

### SFC JS

```vue
<script setup>
import {
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscDatepicker,
  MbscSegmented,
  MbscSegmentedGroup,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

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

const myCalendarType = ref('week')
</script>

<template>
  <MbscDatepicker
    display="inline"
    :controls="['calendar']"
    :calendarType="myCalendarType"
    :calendarSize="1"
  >
    <template #header>
      <MbscCalendarNav class="custom-view-nav" />
      <div class="custom-view">
        <MbscSegmentedGroup v-model="myCalendarType">
          <MbscSegmented value="week" icon="material-date-range"></MbscSegmented>
          <MbscSegmented value="month" icon="material-event-note"></MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev />
      <MbscCalendarNext />
    </template>
  </MbscDatepicker>
</template>

<style>
.custom-view .mbsc-segmented .mbsc-icon {
  font-size: 20px;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscDatepicker,
  MbscSegmented,
  MbscSegmentedGroup,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

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

const myCalendarType = ref<'month' | 'week'>('week')
</script>

<template>
  <MbscDatepicker
    display="inline"
    :controls="['calendar']"
    :calendarType="myCalendarType"
    :calendarSize="1"
  >
    <template #header>
      <MbscCalendarNav class="custom-view-nav" />
      <div class="custom-view">
        <MbscSegmentedGroup v-model="myCalendarType">
          <MbscSegmented value="week" icon="material-date-range"></MbscSegmented>
          <MbscSegmented value="month" icon="material-event-note"></MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev />
      <MbscCalendarNext />
    </template>
  </MbscDatepicker>
</template>

<style>
.custom-view .mbsc-segmented .mbsc-icon {
  font-size: 20px;
}
</style>
```

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

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

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

## Related demos

- Previous: [Quarter and Year View](https://demo.mobiscroll.com/vue/calendar/quarter-year-view.md) - A Vue 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/vue/calendar/dots-colors-labels.md) - Mark calendar dates with colored dots, background highlights, or text labels — for specific dates, date ranges, or recurring rules.