---
title: "Vue Event calendar Switch Day, Week and Month Views Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/eventcalendar/switching-day-week-month-view"
---

# Switch Day, Week and Month Views - Vue Event calendar demo

Switch a Vue event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/eventcalendar/switching-day-week-month-view)
- [Preview in full screen](https://demo.mobiscroll.com/fullscreen/eventcalendar/switching-day-week-month-view)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/calendar-view/switching-day-week-month-view)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/calendar-view/switching-day-week-month-view)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/switching-day-week-month-view.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/switching-day-week-month-view.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/switching-day-week-month-view.md), [React](https://demo.mobiscroll.com/react/eventcalendar/switching-day-week-month-view.md)

## Description

Dynamically switch views within one calendar instance. Use a UI control to let users do the switching or do it programmatically. This example features a segmented component inside the header, but the live option changes can be invoked from anywhere.

Switch between a month view with a monthly agenda, a week view with a weekly agenda and daily event list.

Thanks to property binding and all option changes are live and propagate accordingly.

**Interested in the agenda?** [How to render an agenda instead of a calendar →](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda)

## What this demo shows

- This demo switches an event calendar instance between month, week, and day layouts from a segmented control in the header.
- **Header control** The center area of the header contains a segmented control for switching between month, week, and day views represented with icons.
- **Calendar header** The top-left side shows the current month and year or the current date in case of day view, while the top-right side includes blue previous and next navigation arrows.
- **Month view** The default layout shows a mobile month calendar at the top and a monthly agenda below it.
- **Month view** Dates that have events are marked with a small dot in the day cell.
- **Monthly agenda** Under the month view, events are grouped by date in a monthy agenda vertical list, with sticky date headers as the user scrolls.
- **Month and agenda sync** Scrolling the agenda updates the selected date in the month calendar so it stays aligned with the visible event group.
- **Date selection** Clicking a date in the month calendar navigates the agenda to that date and reveals its events.
- **Week view** Switching to week view shows a week calendar at the top and a weekly agenda below it.
- **Day view** Switching to day view shows a daily agenda event list for the selected date.
- **Month and week navigation** The month and week view can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the cell selects the day and highlights the day number with a blue background.

## Best for

- **Multi-level schedule browsing** Apps where users need to move between month overview, week planning, and day-level details without leaving the same screen.
- **Mobile scheduling flows** Touch-friendly experiences where a header control is a simple way to switch between calendar scopes.
- **Operational planning** Use cases where users need both a quick overview of upcoming activity and a detailed list of events for the selected date.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option

## Code

### SFC JS

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

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

const myEvents = ref([])

const myView = ref({
  calendar: { type: 'month' },
  agenda: { type: 'month' }
})

const view = ref('month')

function changeView() {
  setTimeout(() => {
    switch (view.value) {
      case 'month':
        myView.value = {
          calendar: { type: 'month' },
          agenda: { type: 'month' }
        }
        break
      case 'week':
        myView.value = {
          calendar: { type: 'week' },
          agenda: { type: 'week' }
        }
        break
      case 'day':
        myView.value = {
          agenda: { type: 'day' }
        }
        break
    }
  })
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :view="myView" :data="myEvents">
    <template #header>
      <MbscCalendarNav />
      <div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">
        <MbscSegmentedGroup v-model="view" @change="changeView()">
          <MbscSegmented value="month" icon="material-event-note"></MbscSegmented>
          <MbscSegmented value="week" icon="material-date-range"></MbscSegmented>
          <MbscSegmented value="day" icon="material-view-day"></MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev cssClass="cal-header-prev" />
      <MbscCalendarNext cssClass="cal-header-next" />
    </template>
  </MbscEventcalendar>
</template>

<style>
.md-switching-view-cont {
  height: 100%;
}

.md-switching-view-cont .mbsc-segmented {
  margin: 0;
}

.md-switching-view-cont .mbsc-segmented.mbsc-material,
.md-switching-view-cont .mbsc-segmented.mbsc-windows {
  padding: 0;
}

.md-switching-view-cont .mbsc-segmented .mbsc-segmented-button {
  padding: 0 1px;
}

.md-switching-view-cont .mbsc-segmented .mbsc-icon {
  font-size: 20px;
}

.md-switching-view-cont .mbsc-segmented-button.mbsc-windows {
  border: 0;
}

.cal-header-picker {
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.cal-header-nav {
  width: 165px;
}

.cal-header-nav .mbsc-calendar-title.mbsc-material {
  font-size: 16px;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  getJson,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscEventcalendar,
  MbscSegmented,
  MbscSegmentedGroup,
  setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref<MbscCalendarEvent[]>([])

const myView = ref<MbscEventcalendarView>({
  calendar: { type: 'month' },
  agenda: { type: 'month' }
})

const view = ref<string>('month')

function changeView() {
  setTimeout(() => {
    switch (view.value) {
      case 'month':
        myView.value = {
          calendar: { type: 'month' },
          agenda: { type: 'month' }
        }
        break
      case 'week':
        myView.value = {
          calendar: { type: 'week' },
          agenda: { type: 'week' }
        }
        break
      case 'day':
        myView.value = {
          agenda: { type: 'day' }
        }
        break
    }
  })
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :view="myView" :data="myEvents">
    <template #header>
      <MbscCalendarNav />
      <div class="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">
        <MbscSegmentedGroup v-model="view" @change="changeView()">
          <MbscSegmented value="month" icon="material-event-note"></MbscSegmented>
          <MbscSegmented value="week" icon="material-date-range"></MbscSegmented>
          <MbscSegmented value="day" icon="material-view-day"></MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev cssClass="cal-header-prev" />
      <MbscCalendarNext cssClass="cal-header-next" />
    </template>
  </MbscEventcalendar>
</template>

<style>
.md-switching-view-cont {
  height: 100%;
}

.md-switching-view-cont .mbsc-segmented {
  margin: 0;
}

.md-switching-view-cont .mbsc-segmented.mbsc-material,
.md-switching-view-cont .mbsc-segmented.mbsc-windows {
  padding: 0;
}

.md-switching-view-cont .mbsc-segmented .mbsc-segmented-button {
  padding: 0 1px;
}

.md-switching-view-cont .mbsc-segmented .mbsc-icon {
  font-size: 20px;
}

.md-switching-view-cont .mbsc-segmented-button.mbsc-windows {
  border: 0;
}

.cal-header-picker {
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.cal-header-nav {
  width: 165px;
}

.cal-header-nav .mbsc-calendar-title.mbsc-material {
  font-size: 16px;
}
</style>
```

## Implementation notes

- Define three view configs controlled by a state variable:
  - Month: `{ calendar: { type: 'month' }, agenda: { type: 'month' } }`
  - Week: `{ calendar: { type: 'week' }, agenda: { type: 'week' } }`
  - Day: `{ agenda: { type: 'day' } }`
- Use `renderHeader` (Angular: `headerTemplate`, Vue: `#header` slot) to build a custom header: `CalendarNav` on the left, an icon-only `SegmentedGroup` in the center with three `Segmented` items (`material-event-note` for month, `material-date-range` for week, `material-view-day` for day), and `CalendarPrev` and `CalendarNext` on the right.
- When the segmented selection changes, update the active view config. JS/jQuery: call `inst.setOptions({ view: ... })` instead of binding a reactive prop.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.

## 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: [Colored Cell Backgrounds](https://demo.mobiscroll.com/vue/eventcalendar/colored-cell-background.md) - Color day-cell backgrounds in a Vue event calendar — mark exact or recuring dates or date ranges as visual highlights for holidays and special days.
- Next: [External Date Picker Navigation](https://demo.mobiscroll.com/vue/eventcalendar/navigate-from-external-date-picker.md) - Use a Vue event calendar with an external date picker in two-pane layout — date selection navigates the calendar and keeps both in sync.