---
title: "Vue Timeline Day, Week, Month & Year Views Example | Mobiscroll"
component: "Timeline"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/timeline/daily-weekly-monthly-yearly-timeline"
---

# Day, Week, Month & Year Views - Vue Timeline demo

Switch between day, week, month, and year views on the Vue Timeline — configure visible weekdays, working hours, and time scale per view. For Vue and Nuxt.

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

## Description

Set up `day`, `week`, `month` or `year` views.

For certain views you can customize the visible days along with the scale of the timeline through the `timeline` object under the [`view` option](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view). You can control the days shown (eg. Weekdays), set the time scale (eg. 30 minutes) and set the labels shown (eg. every 15 minutes).

- **Specify the first and last visible weekdays** - Use the `startDay` and `endDay` properties
- **Set the visible time range** - Use the `startTime` and `endTime` properties
- **Shift the visible time window** - Use the `startTime` and `endTime` properties to include ranges that extend into the previous or next day
- **Control the granularity of the timeline** - Use the `timeCellStep` and `timeLabelStep` properties
- **Week numbers** - Controlled through the `weekNumbers` property
- **Real time positioning or event listing** - Set `eventDisplay: 'fill'` if you want to list the events on a daily basis rather than have them positioned with minute precision

**Interested in the time grid?** [Check out how you can configure the vertical time rendering →](https://demo.mobiscroll.com/vue/scheduler/show-hide-hours-days)

## What this demo shows

- A configurable desktop timeline with working days arranged horizontally and resources listed vertically on the left.
- **View controls** A configuration panel beside the timeline lets users switch between `Day`, `Week`, `Month`, and `Year` views, with `Week` selected by default.
- **Days configuration** Users can choose the first and last visible day from dropdowns in the "Display days from ... to ..." control. The default range is Monday to Friday.
- **Other controls** Three toggle controls let users show a daily event summary, show week numbers, and show the current time indicator. The daily summary and week numbers are disabled by default, while the current time indicator is enabled by default.
- **Hours configuration** Users can choose the first and last visible hour from dropdowns in the "Display hours from ... to ..." control. The default range is 9 AM to 5 PM.
- **Time scale control** Users can set the timeline time scale from the "Set the time scale to ..." dropdown.
- **Time labels control** Users can set how often time labels appear from the "Show time labels for every ..." dropdown.
- **Header navigation** The month and year label in the top left opens date navigation. Previous and next arrows, together with the Today button, let users move between date ranges and return to the current day.
- **Week view** A fixed strip below the header shows the selected work week from Monday to Friday using the `DD DDD MMM YYYY` date format, with the current date highlighted.
- **Time grid** Each day shows working hours from 9 AM to 5 PM with hourly columns.
- **Resources** Six resources are shown as individual rows on the left side of the timeline.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events render as colored cards with a colored stripe on the left, the exact start and end time above the title, and the event title in bold.
- **Event positioning** Events are positioned by assigned resource, date, start time, and end time.
- **Event interaction** Events highlight on hover and expose drag and resize handles for moving events or changing their duration.
- **Event selection** Clicking an event selects and highlights it.
- **Horizontal scrolling** The timeline supports horizontal scrolling for navigating the visible date and time range.

## Best for

- **Configurable timeline views** Let users adjust the visible date range, hour range, grid scale, and label frequency without changing the underlying timeline setup.

## Tutorial

- ( ) Day
- (x) Week
- ( ) Month
- ( ) Year
- Display days from `Monday` to `Friday`

This defines which weekdays to display. To set the first day of the week, use the [`firstDay`](https://mobiscroll.com/docs/vue/eventcalendar/api#localization-firstDay) option instead.

- [ ] Show a daily summary of events
- [ ] Show week numbers
- [x] Show current time indicator
- Display hours from `09:00` to `17:00`
- Set the time scale to `1 hour`
- Show time labels for every `1 hour`

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Day":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'day',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Month":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'month',
    startDay: 1,
    endDay: 5,
    eventDisplay: 'fill',
    weekNumbers: false
  }
}
</script>

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

With "Year":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'year',
    startDay: 1,
    endDay: 5,
    eventDisplay: 'fill',
    weekNumbers: false
  }
}
</script>

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

With "Sunday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 0,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Tuesday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 2,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Wednesday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 3,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Thursday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 4,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Friday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 5,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Saturday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 6,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Sunday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 0,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Monday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 1,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Tuesday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 2,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Wednesday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 3,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Thursday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 4,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "Saturday":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 6,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "00:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '00:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "01:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '01:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "02:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '02:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "03:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '03:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "04:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '04:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "05:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '05:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "06:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '06:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "07:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '07:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "08:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '08:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "09:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "10:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '10:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "11:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '11:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "12:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '12:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "13:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '13:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "14:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '14:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "15:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '15:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "16:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '16:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "17:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '17:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "18:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '18:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "19:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '19:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "20:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '20:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "21:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '21:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "22:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '22:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "23:00 (the day before)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '23:00-1',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "00:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '00:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "01:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '01:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "02:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '02:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "03:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '03:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "04:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '04:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "05:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '05:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "06:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '06:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "07:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '07:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "08:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '08:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "10:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '10:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "11:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '11:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "12:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '12:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "13:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '13:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "14:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '14:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "15:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '15:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "16:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '16:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "17:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '17:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "18:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '18:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "19:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '19:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "20:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '20:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "21:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '21:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "22:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '22:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "23:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '23:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "24:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '24:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "00:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '00:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "01:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '01:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "02:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '02:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "03:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '03:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "04:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '04:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "05:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '05:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "06:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '06:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "07:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '07:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "08:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '08:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "09:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '09:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "10:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '10:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "11:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '11:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "12:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '12:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "13:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '13:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "14:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '14:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "15:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '15:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "16:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '16:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "18:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '18:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "19:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '19:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "20:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '20:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "21:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '21:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "22:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '22:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "23:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '23:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "24:00":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '24:00',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "01:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '01:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "02:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '02:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "03:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '03:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "04:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '04:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "05:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '05:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "06:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '06:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "07:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '07:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "08:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '08:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "09:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '09:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "10:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '10:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "11:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '11:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "12:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '12:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "13:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '13:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "14:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '14:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "15:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '15:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "16:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '16:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "17:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "18:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '18:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "19:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '19:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "20:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '20:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "21:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '21:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "22:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '22:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "23:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '23:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "24:00 (the day after)":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '24:00+1',
    timeCellStep: 60,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "5 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 5,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "10 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 10,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "15 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 15,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "30 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 30,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "2 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 120,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "3 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 180,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "4 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 240,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "6 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 360,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "8 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 480,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "12 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 720,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "24 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 1440,
    timeLabelStep: 60,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "5 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 5,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "10 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 10,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "15 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 15,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "30 minutes":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 30,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "2 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 120,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "3 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 180,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "4 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 240,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "6 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 360,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "8 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 480,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "12 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 720,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

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

With "24 hours":

```vue
<script setup>
const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    startTime: '09:00',
    endTime: '17:00',
    timeCellStep: 60,
    timeLabelStep: 1440,
    weekNumbers: false,
    currentTimeIndicator: true
  }
}
</script>

<template>
  <MbscEventcalendar :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
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - 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 myResources = ref([
  {
    id: 1,
    name: 'Flatiron Room',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'The Capital City',
    color: '#ff0101'
  },
  {
    id: 3,
    name: 'Heroes Square',
    color: '#01adff'
  },
  {
    id: 4,
    name: 'Thunderdome',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'King’s Landing',
    color: '#ff4600'
  },
  {
    id: 6,
    name: 'Gathering Field',
    color: '#8f1ed6'
  }
])

const myView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    timeCellStep: 60,
    timeLabelStep: 60
  }
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/daily-weekly-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :view="myView" :data="myEvents" :resources="myResources" />
</template>
```

### SFC TS

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

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

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

const myResources = ref<MbscResource[]>([
  {
    id: 1,
    name: 'Flatiron Room',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'The Capital City',
    color: '#ff0101'
  },
  {
    id: 3,
    name: 'Heroes Square',
    color: '#01adff'
  },
  {
    id: 4,
    name: 'Thunderdome',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'King’s Landing',
    color: '#ff4600'
  },
  {
    id: 6,
    name: 'Gathering Field',
    color: '#8f1ed6'
  }
])

const myView: MbscEventcalendarView = {
  timeline: {
    type: 'week',
    startDay: 1,
    endDay: 5,
    timeCellStep: 60,
    timeLabelStep: 60
  }
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/daily-weekly-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :view="myView" :data="myEvents" :resources="myResources" />
</template>
```

## Implementation notes

- Set `timeline: { type: 'week', startDay: 1, endDay: 5, timeCellStep: 60, timeLabelStep: 60 }` under the `view` option to render a Monday-Friday weekly timeline with one-hour-wide columns and one-hour-interval labels. This is the default configuration shown in the demo.
- `type` accepts `'day'`, `'week'`, `'month'`, or `'year'`. Switching the type changes the horizontal resolution: `'day'` shows hours within a single day; `'week'` shows days within a week; `'month'` shows days within a month; `'year'` shows months within a year.
- `startDay` and `endDay` (0 = Sunday ... 6 = Saturday) trim the visible weekdays. Setting `startDay: 1, endDay: 5` restricts the view to Monday-Friday and hides weekend columns.
- `timeCellStep` controls the width of each time column in minutes; `timeLabelStep` controls how often the header label repeats. Set both to the same value (e.g. 60) for uniform labeled columns, or set `timeLabelStep` to a multiple of `timeCellStep` to show a label every N cells.
- `startTime` and `endTime` limit the visible hour range within each day (e.g. `'08:00'` to `'18:00'`). Values can cross midnight to show overnight windows (e.g. `startTime: '22:00'`, `endTime: '06:00'`).
- Set `eventDisplay: 'fill'` to list events as daily blocks spanning the full cell height, rather than positioning them by exact start/end minute. Useful for month or year views where minute-precision layout is not meaningful.
- Define room or venue resources with `id`, `name`, and `color`. Load events from a remote endpoint using `getJson` (or any fetch helper) and pass them to `data`. Each event needs a `resource` id, `start`, `end`, and `title`.

## 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: [Multiple Time Scales](https://demo.mobiscroll.com/vue/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md) - Configure span and time scale on a Vue Timeline — switch day, week, month, quarter, or year views, set resolution, and show or hide empty rows.