---
title: "Vue Calendar Display Modes Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/calendar/mobile-desktop-display"
---

# Display Modes - Vue Calendar demo

Choose between inline, anchored, top, bottom, or center display modes for a Vue date picker — and switch between mobile and desktop rendering. For Vue and Nuxt.

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

## Description

The date picker has five built-in display modes that can be controlled through the [`display` option](https://mobiscroll.com/docs/vue/datepicker/api#opt-display):

- `top` - modal that slides down from the top
- `bottom` - modal that slides up from the bottom
- `center` - modal that shows up in the middle with a pop animation
- `anchored` - modal that shows up anchored to an input or any dom element
- `inline` - embeddable picker that is rendered into the markup without its own modal

Use the [`touchUi` option](https://mobiscroll.com/docs/vue/datepicker/api#opt-touchUi) to switch between touch optimized mobile rendering and pointer optimized desktop rendering. It can be dynamically switched with the help of the `responsive` option.

The defaults change on a theme to theme basis. The `ios` theme comes with `bottom` on mobile and `anchored` on desktop while the `material` and `windows` themes have `center` on mobile and `anchored` on desktop.

**Want to see how to set up responsiveness?** [Check out the previous example →](https://demo.mobiscroll.com/vue/datetime/responsive)

## What this demo shows

- Shows five monthly date pickers demonstrate single-date selection with the supported display modes.
- **Inline date picker** The inline example embeds the date picker directly in the page without an input or modal.
- **Anchored date picker** The anchored example opens from an input and positions the picker next to that input or another DOM element.
- **Top date picker** The top example opens in a modal that slides down from the top.
- **Bottom date picker** The bottom example opens in a modal that slides up from the bottom.
- **Center date picker** The center example opens in the middle of the viewport with a pop animation.
- **Modal behavior** Focusing or clicking an input opens its picker, while clicking outside the picker closes it.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month. 
- **Footer actions** In the input-based examples, the gray Cancel button discards the change, while the blue Set button confirms the selected date.
- **Input value** In the input-based examples, confirming a date with Set displays the selected value in the input using a month, day, and year format.

## Best for

- **Inline layouts** Keep the date picker visible in booking flows, forms, dashboards, or side panels where users need direct access to date selection.
- **Anchored desktop forms** Open the picker next to an input or another page element when the surrounding form should remain visible.
- **Top-aligned mobile flows** Use a modal that enters from the top when the date picker should follow a top-oriented mobile layout.
- **Bottom-aligned mobile flows** Use a modal that enters from the bottom for touch-oriented interfaces and bottom-sheet interaction patterns.
- **Focused modal tasks** Center the picker when date selection should appear as a distinct task in the middle of the viewport.
- **Responsive date selection** Switch between touch-optimized and pointer-optimized presentations when the same date picker must serve mobile and desktop layouts.

## Tutorial

```vue
<MbscDatepicker
  display="inline"
  :touchUi="true"
/>
```

```vue
<MbscDatepicker
  display="anchored"
  :touchUi="true"
/>
```

```vue
<MbscDatepicker
  display="top"
  :touchUi="true"
/>
```

```vue
<MbscDatepicker
  display="bottom"
  :touchUi="true"
/>
```

```vue
<MbscDatepicker
  display="center"
  :touchUi="true"
/>
```

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

## Code

### SFC JS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <MbscDatepicker :controls="['calendar']" display="inline" />
    <MbscDatepicker
      :controls="['calendar']"
      display="anchored"
      label="Anchored"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar']"
      display="top"
      label="Top"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar']"
      display="bottom"
      label="Bottom"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar']"
      display="center"
      label="Center"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
  </MbscPage>
</template>
```

### SFC TS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <MbscDatepicker :controls="['calendar']" display="inline" />
    <MbscDatepicker
      :controls="['calendar']"
      display="anchored"
      label="Anchored"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar']"
      display="top"
      label="Top"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar']"
      display="bottom"
      label="Bottom"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
    <MbscDatepicker
      :controls="['calendar']"
      display="center"
      label="Center"
      inputStyle="outline"
      labelStyle="stacked"
      placeholder="Please Select..."
    />
  </MbscPage>
</template>
```

## Implementation notes

- Use `controls: ['calendar']` with `display` set to `'inline'` (embedded, no popup), `'anchored'` (opens next to the input), `'top'` (modal entering from the top), `'bottom'` (modal entering from the bottom), or `'center'` (centered modal).
- `'inline'` mode has no popup/modal semantics - it's always embedded directly in the page; the other four values all render as a popup relative to an associated input.
- The four input-based examples set `label`, `labelStyle: 'stacked'`, `inputStyle: 'outline'`, and `placeholder` on the input to render a stacked-label, outline-style field; the `inline` example has no associated input.
- `touchUi` can be set to control whether the picker renders in touch-optimized (mobile) or desktop mode.

## 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: [Responsive Calendar](https://demo.mobiscroll.com/vue/calendar/responsive.md) - A Vue date picker that switches layout by screen size — bottom-sheet on mobile, popover on tablet, and inline calendar on desktop.