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

# Week and Month View - Vue Event calendar demo

Display events in a Vue calendar with switchable week and month views — choose 1, 2, or 3 weeks and set a locale-aware or fixed week start day. For Vue and Nuxt.

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

## Description

The calendar view supports variable weeks. Save space by only displaying one or two weeks or go for a full month where it makes sense. Use the `type` and `size` properties of the [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) option to set the size of the month or week view.

You can also set the first day of the week using the [`firstDay`](https://mobiscroll.com/docs/vue/datepicker/api#localization-firstDay) option, where Sunday is 0, Monday is 1, etc.

## What this demo shows

- This demo shows an Event Calendar that can switch between a full month view and variable week views.
- **Calendar layout** In week mode, the calendar can display one, two, or three weeks at a time. In month mode, it shows the full month grid.
- **Event labels** Days with events display labels inside the day cell. Label styling changes based on the event type, including all-day, multi-day, and timed events. Event labels use different colors to distinguish between events.
- **Overflow handling** The number of visible event labels depends on the available vertical space in the day cell. Additional events are moved into a popover and indicated by an `X more` label where `X` represents the number of events inside the popover.
- **Popover interaction** Clicking the `X more` indicator opens a popover that lists the hidden events for that day.
- **Event selection** Hovering over or selecting an event label highlights that event.
- **Cell hover and selection** Hovering over a day cell highlights the day number in the top-right corner with a gray background. Clicking the empty area of a day cell selects that day and highlights the day number with a blue background.
- **Navigation** The calendar can be navigated by clicking and dragging left or right.
- **Header controls** The header shows the current month and year on the left, with blue previous and next arrows plus a `Today` button on the right.
- **View configuration panel** A side panel lets the user switch between `Month view` and `Week view`. In week view, a segmented control lets the user choose `One`, `Two`, or `Three` weeks.
- **Week start panel** A second side panel lets the user set the first day of the week to `Auto (set by locale)`, `Sunday`, or `Monday`.

## Best for

- **Space-sensitive calendar layouts** Interfaces that need to show one, two, or three weeks instead of a full month to save space.
- **Switchable overview depth** Experiences where users need to move between a compact weekly overview and a full month view.
- **Locale-aware calendars** Setups where the first day of the week should follow locale defaults or be switched explicitly to Sunday or Monday.
- **Event-dense month and week grids** Calendars that need to show event labels in day cells while still handling overflow through a more popup.

## Tutorial

### Configure month or week view

- ( ) Month view
- (x) Week view One Two Three weeks
- Set the first day of week to `Auto (set by locale)`

```vue
<script setup>
const myView = {
  calendar: {
    labels: true,
    type: 'week',
    size: 2
  }
}
</script>

<template>
  <MbscEventcalendar :view="myView" />
</template>
```

With "Month view":

```vue
<script setup>
const myView = {
  calendar: {
    labels: true,
    type: 'month'
  }
}
</script>

<template>
  <MbscEventcalendar :view="myView" />
</template>
```

With "One":

```vue
<script setup>
const myView = {
  calendar: {
    labels: true,
    type: 'week',
    size: 1
  }
}
</script>

<template>
  <MbscEventcalendar :view="myView" />
</template>
```

With "Three":

```vue
<script setup>
const myView = {
  calendar: {
    labels: true,
    type: 'week',
    size: 3
  }
}
</script>

<template>
  <MbscEventcalendar :view="myView" />
</template>
```

With "Sunday":

```vue
<script setup>
const myView = {
  calendar: {
    labels: true,
    type: 'week',
    size: 2
  }
}
</script>

<template>
  <MbscEventcalendar :firstDay="0" :view="myView" />
</template>
```

With "Monday":

```vue
<script setup>
const myView = {
  calendar: {
    labels: true,
    type: 'week',
    size: 2
  }
}
</script>

<template>
  <MbscEventcalendar :firstDay="1" :view="myView" />
</template>
```

## 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
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option

## Code

### SFC JS

```vue
<script setup>
import {
  getJson,
  MbscEventcalendar,
  MbscPage,
  setOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref([])
const oneWeekView = { calendar: { type: 'week' } }
const twoWeekView = { calendar: { type: 'week', size: 2 } }
const threeWeekView = { calendar: { type: 'week', size: 3 } }

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

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">One week view</div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :view="oneWeekView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Two week view</div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :view="twoWeekView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Three week view</div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :view="threeWeekView" />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  getJson,
  MbscEventcalendar,
  MbscPage,
  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 oneWeekView: MbscEventcalendarView = { calendar: { type: 'week' } }
const twoWeekView: MbscEventcalendarView = { calendar: { type: 'week', size: 2 } }
const threeWeekView: MbscEventcalendarView = { calendar: { type: 'week', size: 3 } }

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

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">One week view</div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :view="oneWeekView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Two week view</div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :view="twoWeekView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Three week view</div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="myEvents" :view="threeWeekView" />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Render three separate `Eventcalendar` instances side by side. Use `type: 'week'` in each `calendar` config, varying `size` to display 1, 2, or 3 weeks: `{ calendar: { type: 'week' } }`, `{ calendar: { type: 'week', size: 2 } }`, `{ calendar: { type: 'week', size: 3 } }`.
- Load events from a remote endpoint using `getJson` and pass the same `data` array to all three instances; 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

- Next: [Quarter and Year View](https://demo.mobiscroll.com/vue/eventcalendar/quarter-year-view.md) - Show three months or a full year in the Vue event calendar — switch between quarter and year views to give users a planning-scale event overview.