---
title: "Vue Calendar Responsive Calendar Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/calendar/responsive"
---

# Responsive Calendar - Vue Calendar demo

A Vue date picker that switches layout by screen size — bottom-sheet on mobile, popover on tablet, and inline calendar on desktop. For Vue and Nuxt.

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

## Description

The date & time has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.

Use the [`responsive` option](https://mobiscroll.com/docs/vue/datepicker/api#opt-responsive) to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:

- `xsmall` - min-width: 0px
- `small` - min-width: 576px
- `medium` - min-width: 768px
- `large` - min-width: 992px
- `xlarge` - min-width: 1200px
- use `custom` for setting a custom `breakpoint`

It is a good idea to change the `display` or `controls` option to tailor the UX. This way you can have a **bottom positioned calendar on mobile**, a **popover anchored to the input on tablet** and **desktop display on large screens**.

## What this demo shows

- Shows a monthly date picker example for selecting a single date across touch and desktop layouts.
- **Viewport switcher** A segmented control above the date picker switches between the demo's viewport presets.
- **Small screen layout** At the `375px` viewport preset, the calendar opens at the bottom of the screen.
- **Medium screen layout** At the `576px` and `768px` viewport presets, the calendar opens in a popover anchored to the input.
- **Large screen layout** At the `992px` and `1200px` viewport presets, the calendar uses a desktop display.
- **Date picker input** Focusing or clicking the input opens the picker.
- **Header navigation** Clicking the month and year label in the top-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Clicking and dragging the calendar left or right changes the displayed month.
- **Day cell states** Hovering over a day applies a gray background to its number. Selecting a day applies a blue background. The current date remains highlighted in blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to the corresponding month.
- **Footer actions** Cancel discards the change, while Set confirms the selected date.
- **Input value** Confirming a date with Set displays it in the input using a month, day, and year format.

## Best for

- **Appointment booking** Letting users choose an appointment date from phones, tablets, or desktop computers.
- **Travel and accommodation forms** Providing a date picker that adapts to the available screen size when selecting departure, arrival, or check-in dates.
- **Responsive business applications** Using a bottom-positioned calendar on small screens and an input-anchored popover when more space is available.

## Tutorial

```vue
<script setup>
const myResp = {
  xsmall: {
    controls: ['calendar'],
    display: 'bottom',
    touchUi: true
  },
  small: {
    controls: ['calendar'],
    display: 'anchored',
    touchUi: true
  },
  custom: { // Custom breakpoint
    breakpoint: 800,
    controls: ['calendar'],
    display: 'anchored'
    touchUi: false
  }
}
</script>
<template>
  <MbscDatepicker :responsive="myResp" />
</template>
```

## 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
- [`touchUi`](https://mobiscroll.com/docs/vue/datepicker/api#opt-touchUi) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`responsive`](https://mobiscroll.com/docs/vue/datepicker/api#opt-responsive) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option

## Code

### SFC JS

```vue
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'

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

const myResponsive = {
  xsmall: {
    display: 'bottom'
  },
  small: {
    display: 'anchored'
  },
  custom: {
    // Custom breakpoint
    breakpoint: 800,
    display: 'anchored',
    touchUi: false
  }
}
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    :responsive="myResponsive"
    labelStyle="stacked"
    inputStyle="box"
  />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
import type { MbscDatepickerOptions, MbscResponsiveOptions } from '@mobiscroll/vue'

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

const myResponsive: MbscResponsiveOptions<MbscDatepickerOptions> = {
  xsmall: {
    display: 'bottom'
  },
  small: {
    display: 'anchored'
  },
  custom: {
    // Custom breakpoint
    breakpoint: 800,
    display: 'anchored',
    touchUi: false
  }
}
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    :responsive="myResponsive"
    labelStyle="stacked"
    inputStyle="box"
  />
</template>
```

## Implementation notes

- Use `controls: ['calendar']`.
- Pass a `responsive` object keyed by breakpoint name, each value an option override object (e.g. `display`, `touchUi`, `controls`) applied once the viewport reaches that breakpoint: built-in keys are `xsmall`, `small`, `medium`, `large`, `xlarge` (only `xsmall`/`small` are used here - `xsmall: { display: 'bottom' }`, `small: { display: 'anchored' }`).
- Define a custom breakpoint instead of (or alongside) the built-in ones by giving the key its own `breakpoint` (pixel width) property, e.g. `custom: { breakpoint: 800, display: 'anchored', touchUi: false }` - options from the highest matching breakpoint at or below the current viewport width apply.
- `responsive` overrides are merged with the base options - set shared options (like `controls`) once at the top level and only the values that change per breakpoint inside each `responsive` entry.

## 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: [Input Field or Inline Embed](https://demo.mobiscroll.com/vue/calendar/usage-on-input-or-inline.md) - Attach the Vue calendar date picker to a form input or embed it inline without an input — supports generated and custom inputs.
- Next: [Display Modes](https://demo.mobiscroll.com/vue/calendar/mobile-desktop-display.md) - Choose between inline, anchored, top, bottom, or center display modes for a Vue date picker — and switch between mobile and desktop rendering.