---
title: "Vue Event calendar Responsive Behaviour Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/eventcalendar/responsive-month-view"
---

# Responsive Behaviour - Vue Event calendar demo

Build a responsive Vue event calendar — switch from week + agenda on mobile to a full month view on desktop using configurable breakpoints. For Vue and Nuxt.

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

## Description

The event calendar is fully responsive. It adapts to the available space and fills the screen to look good everywhere. While you don't have to worry about the width the height can be manually adjusted with the [`height`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-height) option.

Use the [`responsive`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-responsive) option to configure how the calendar behaves on different sized screens. The [`responsive`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-responsive) option is equipped with five breakpoints - `xsmall` **(up to 575px)**, `small` **(up to 767px)**, `medium` **(up to 991px)**, `large` **(up to 1199px)**, `xlarge` **(from 1200px)**. Custom breakpoints can be added if necessary: `my-custom-breakpoint: { breakpoint: 600 }` **(from 600px up to the next breakpoint)**.

## What this demo shows

- A responsive event calendar setup that changes layout based on the selected viewport size.
- **Viewport switcher** A segmented control above the calendar lets you switch between viewport presets in the demo.
- **Small screen layout** On `375px` and `576px` viewports, a week view calendar is shown at the top.
- **Day markers** Days that contain events display a small marker below the day in the week view.
- **Agenda below the calendar** A daily event list is shown under the week view and displays the events for the currently selected date.
- **Synchronized selection** Selecting a different date in the week view updates the agenda automatically to show that day's events.
- **Larger screen layout** On `768px`, `992px`, and `1200px` viewports, the layout switches to a desktop-style month view with event labels shown directly in the calendar cells.
- **Header controls** The view includes the standard header controls for month and year navigation, previous and next arrows, and a `Today` button.

## Best for

- **Responsive event planning UIs** Interfaces that need to present calendar data clearly across mobile, tablet, and desktop screen sizes.
- **Adaptive embedded views** Product areas where the calendar needs to work well inside containers, panels, or sections of a larger page.
- **Breakpoint-based calendar setups** Use cases where different calendar views should be shown at different viewports.

## Tutorial

```vue
<script setup>
const myResponsive = {
  xsmall: {
    view: {
      calendar: { type: 'week' },
      agenda: { type: 'day' }
    }
  },
  custom: { // Custom breakpoint
    breakpoint: 600,
    view: {
      calendar: { labels: true }
    }
  }
}
</script>

<template>
  <MbscEventcalendar
    :responsive="myResponsive"
  />
</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
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`labels`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-labels) - 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
- [`responsive`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-responsive) - option

## Code

### SFC JS

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

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

const myEvents = ref([])

const myResponsive = {
  xsmall: {
    view: {
      calendar: {
        type: 'week'
      },
      agenda: {
        type: 'day'
      }
    }
  },
  custom: {
    // Custom breakpoint
    breakpoint: 600,
    view: {
      calendar: {
        labels: true
      }
    }
  }
}

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" :data="myEvents" :responsive="myResponsive" />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { getJson, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscEventcalendarOptions,
  MbscResponsiveOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

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

const myResponsive: MbscResponsiveOptions<MbscEventcalendarOptions> = {
  xsmall: {
    view: {
      calendar: {
        type: 'week'
      },
      agenda: {
        type: 'day'
      }
    }
  },
  custom: {
    // Custom breakpoint
    breakpoint: 600,
    view: {
      calendar: {
        labels: true
      }
    }
  }
}

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" :data="myEvents" :responsive="myResponsive" />
</template>
```

## Implementation notes

- Use the `responsive` option to configure different views per screen size. Each key is a breakpoint name containing a `view` config; custom breakpoints also include a `breakpoint` pixel value.
- This demo configures two breakpoints:
  - `xsmall`: `view: { calendar: { type: 'week' }, agenda: { type: 'day' } }` - a week grid with a single-day agenda for narrow screens
  - `custom`: `{ breakpoint: 600, view: { calendar: { labels: true } } }` - a full month grid with inline event labels from 600px and above
- The built-in named breakpoints are `xsmall` (≤575px), `small` (≤767px), `medium` (≤991px), `large` (≤1199px), and `xlarge` (≥1200px). Custom numeric breakpoints can be mixed in alongside them.
- 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: [Desktop Month View](https://demo.mobiscroll.com/vue/eventcalendar/desktop-month-view.md) - Show a full-month Vue event calendar for desktop — display event labels, show hidden events in an overflow popover, and expand the grid to fill the container.
- Next: [Printing & PDF Export](https://demo.mobiscroll.com/vue/eventcalendar/printing-the-view.md) - Print only the calendar view — not the full page — or export it to PDF with the Vue event calendar print add-on.