---
title: "Vue Agenda Daily, Weekly, Monthly & Yearly Views Example | Mobiscroll"
component: "Agenda"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda"
---

# Daily, Weekly, Monthly & Yearly Views - Vue Agenda demo

Build a Vue agenda list view that switches between daily, weekly, monthly, and yearly modes — display events for a single or multiple consecutive periods. For Vue and Nuxt.

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

## Description

Use the `agenda` object inside the [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) option to configure the agenda. `type` and `size` can be set as follows:

- **day** - `agenda: { type: 'day', size: 20 }` can be configured for a single day or a range of days
- **week** - `agenda: { type: 'week', size: 3 }` can be configured for a single or multiple weeks
- **month** - `agenda: { type: 'month' }` can be configured for one or more months
- **year** - `agenda: { type: 'year' }` can be configured for one or more years

**Interested in combining this with a calendar view?** [Check out the previous example →](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar)

## What this demo shows

- Shows an agenda view where events are listed below the header for the selected date range.
- **View controls:** A control panel on the left lets users switch the agenda type between daily, weekly, monthly, and yearly views.
- **Default view:** The daily agenda is selected by default.
- **Range size:** Users can choose whether to show a single day, week, month, or year, or enter a number to display multiple days, weeks, months, or years.
- **Agenda update:** Changing the agenda type or range size updates the visible agenda view.
- **Header navigation:** The month, selected date, and year label in the top-left header opens date navigation.
- **Date navigation:** The previous and next arrows move through the agenda range, while the Today button jumps back to the current date.
- **Agenda list:** The area below the header lists events for the selected range.
- **Events:** Events appear as agenda cards with a colored strip on the left and the event title beside it.
- **Timed events:** Start and end times are stacked on the right side of timed event cards.
- **Event interaction:** Hovering over an event highlights it.
- **Event selection:** Clicking an event selects and highlights it.

## Best for

- **Configurable agenda views:** Letting users switch between daily, weekly, monthly, and yearly event lists from the same interface.
- **Variable planning ranges:** Showing a single period or multiple consecutive days, weeks, months, or years based on user input.
- **Schedule review:** Browsing upcoming events in a compact list format instead of a calendar grid.
- **Longer-term overviews:** Reviewing events across larger ranges, such as multiple weeks, months, or a full year.
- **Agenda-focused interfaces:** Building event list views where date navigation and event scanning are more important than grid-based scheduling.

## Tutorial

### Daily agenda

- (x) One day
- ( ) Two days

`1` days

### Weekly agenda

- ( ) One week
- ( ) Two weeks

`1` weeks

### Monthly agenda

- ( ) One month

`1` months

### Yearly agenda

- ( ) One year

`1` years

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'day'
  }
}
</script>

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

With "Two days":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'day',
    size: 2
  }
}
</script>

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

With "days":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'day',
    size: 1
  }
}
</script>

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

With "One week":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'week'
  }
}
</script>

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

With "Two weeks":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'week',
    size: 2
  }
}
</script>

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

With "weeks":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'week',
    size: 1
  }
}
</script>

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

With "One month":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'month'
  }
}
</script>

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

With "months":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'month',
    size: 1
  }
}
</script>

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

With "One year":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'year'
  }
}
</script>

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

With "years":

```vue
<script setup>
const myView = { 
  agenda: {
    type: 'year',
    size: 1
  }
}
</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
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option

## Code

### SFC JS

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

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

const myEvents = ref([])

const dayView = { agenda: { type: 'day' } }
const weekView = { agenda: { type: 'week' } }
const monthView = { agenda: { type: 'month' } }

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Daily agenda</div>
            <MbscEventcalendar :data="myEvents" :view="dayView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Weekly agenda</div>
            <MbscEventcalendar :data="myEvents" :view="weekView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Monthly agenda</div>
            <MbscEventcalendar :data="myEvents" :view="monthView" />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

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

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

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

const dayView: MbscEventcalendarView = { agenda: { type: 'day' } }
const weekView: MbscEventcalendarView = { agenda: { type: 'week' } }
const monthView: MbscEventcalendarView = { agenda: { type: 'month' } }

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Daily agenda</div>
            <MbscEventcalendar :data="myEvents" :view="dayView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Weekly agenda</div>
            <MbscEventcalendar :data="myEvents" :view="weekView" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">Monthly agenda</div>
            <MbscEventcalendar :data="myEvents" :view="monthView" />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Render three Eventcalendar instances side by side inside a `Page` component using Mobiscroll's grid (`mbsc-grid` / `mbsc-row` / `mbsc-col`). Configure each with a different `view` type: `{ agenda: { type: 'day' } }`, `{ agenda: { type: 'week' } }`, and `{ agenda: { type: 'month' } }`.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')` and pass the same array to all three instances. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` on each instance 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: [Basic Usage](https://demo.mobiscroll.com/vue/agenda/basic-usage.md) - Set up the Vue agenda view — display a monthly event list grouped by date with events loaded inline or from an external API.
- Next: [Show Empty Days](https://demo.mobiscroll.com/vue/agenda/show-empty-days.md) - Display day headers for all dates in the Vue Agenda, including days without events — keep the full month visible in the agenda list.