---
title: "Vue Calendar Week View Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/calendar/week-view"
---

# Week View - Vue Calendar demo

Display 1, 2, or 3 weeks inline in a Vue date picker — switch between week and month views dynamically without recreating the component. For Vue and Nuxt.

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

## Description

Show a week calendar instead of a monthly calendar view to save space. By setting the [`calendarType`](https://mobiscroll.com/docs/vue/datepicker/api#opt-calendarType) to `'week'` and passing the count in the [`calendarSize`](https://mobiscroll.com/docs/vue/datepicker/api#opt-calendarSize) option you can simply enable a week view.

You can dynamically change the number of weeks or switch between month and week view without the need for recycling the whole component.

**Interested in switching week and month view?** [Learn how to set up switch inside the calendar →](https://demo.mobiscroll.com/vue/calendar/week-to-month)

## What this demo shows

- This example demonstrate different ways to display one/two or three weeks of calendar for date selection.
- **Week count switcher** A segmented control above the date picker switches between one-, two-, and three-week layouts and updates the calendar view dynamically.
- **Dynamic view updates** The number of displayed weeks can change without recreating the date picker component.
- **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 weeks.
- **Week view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Week navigation** The week 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.

## Best for

- **Compact date selection** Forms, dialogs, and side panels where a full month calendar would use more space than needed.
- **Near-term booking** Appointment, reservation, and service-booking flows focused on availability over the next one to three weeks.
- **Short-range scheduling** Shift planning, task assignment, and resource scheduling where users work within a limited weekly window.
- **Adjustable planning horizons** Interfaces that let users switch between a focused single-week view and a broader two- or three-week overview.

## Tutorial

### Change the week count

- ( ) One week
- (x) Two weeks
- ( ) Three weeks

```vue
<template>
  <MbscDatepicker
    calendarType="week"
    :calendarSize="2"
  />
</template>
```

With "One week":

```vue
<template>
  <MbscDatepicker
    calendarType="week"
    :calendarSize="1"
  />
</template>
```

With "Three weeks":

```vue
<template>
  <MbscDatepicker
    calendarType="week"
    :calendarSize="3"
  />
</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
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/vue/datepicker/api#opt-display) - option
- [`calendarType`](https://mobiscroll.com/docs/vue/datepicker/api#opt-calendarType) - option
- [`calendarSize`](https://mobiscroll.com/docs/vue/datepicker/api#opt-calendarSize) - option

## Code

### SFC JS

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

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

<template>
  <MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="1" />
  <MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="2" />
  <MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="3" />
</template>
```

### SFC TS

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

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

<template>
  <MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="1" />
  <MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="2" />
  <MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="3" />
</template>
```

## Implementation notes

- Use `controls: ['calendar']`, `display: 'inline'`, `calendarType: 'week'`, and `calendarSize: 2` as the starting (two-week) view - a single instance, not three separate calendars.
- `calendarSize` can be set to `1`, `2`, or `3` via `setOptions({ calendarSize })` to resize the same calendar dynamically without recreating the component.

## 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: [Date & Time Picker](https://demo.mobiscroll.com/vue/calendar/date-time-picker.md) - Select a date and time side-by-side with the Vue date picker — use the scroller for exact times or time grid for 30-minute appointment slots.
- Next: [Multiple Months](https://demo.mobiscroll.com/vue/calendar/multiple-months.md) - Show fixed or auto-fit months in the Vue date picker for travel, booking, and long-range date selection.