---
title: "Vue Agenda Basic Usage Example | Mobiscroll"
component: "Agenda"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/agenda/basic-usage"
---

# Basic Usage - Vue Agenda demo

Set up a Vue agenda view — display a monthly event list grouped by date with events loaded from an external API. For Vue and Nuxt.

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

## Description

The events can be [passed in a couple of different ways](https://demo.mobiscroll.com/vue/agenda/load-inline-data). In this example we are loading them through an external API.

**Interested to learn about the calendar view?** [Learn how to set up the range the agenda covers →](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda)

## What this demo shows

- Shows a monthly agenda view with events listed and grouped by date.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **Agenda list** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Monthly event overviews** Showing a full month of scheduled items in a compact agenda list grouped by date.
- **Team calendars** Reviewing meetings, internal events, deadlines, and milestones without using a full calendar grid.
- **Appointment and booking lists** Presenting booked services or reservations by day while keeping event times visible.
- **Editorial and content schedules** Scanning publish dates, campaign tasks, or content deadlines across a month.

## Tutorial

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

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

<template>
  <MbscEventcalendar :view="myView" :data="myEvents" />
</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
- [`event-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventClick) - event
- [`close`](https://mobiscroll.com/docs/vue/notifications/toast#event-onClose) - event

## Code

### SFC JS

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

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

const myEvents = ref([])
const isToastOpen = ref(false)
const toastMessage = ref('')

const myView = {
  agenda: { type: 'month' }
}

function handleEventClick(args) {
  toastMessage.value = args.event.title
  isToastOpen.value = true
}

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

<template>
  <MbscEventcalendar :data="myEvents" :view="myView" @event-click="handleEventClick" />
  <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
</template>
```

### SFC TS

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

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

const myEvents = ref<MbscCalendarEvent[]>([])
const isToastOpen = ref<boolean>(false)
const toastMessage = ref<string>('')

const myView: MbscEventcalendarView = {
  agenda: { type: 'month' }
}

function handleEventClick(args: MbscEventClickEvent) {
  toastMessage.value = args.event.title || ''
  isToastOpen.value = true
}

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

<template>
  <MbscEventcalendar :data="myEvents" :view="myView" @event-click="handleEventClick" />
  <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
</template>
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()` instead. JS/jQuery: call `inst.setEvents(events)` in the callback.
- On `onEventClick`: show a Mobiscroll `Toast` with `args.event.title` as the message.

## 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: [Week Calendar Date Navigation](https://demo.mobiscroll.com/vue/agenda/daily-agenda-with-week-calendar.md) - Configure the Vue Agenda standalone or paired with a week calendar — list events day by day and let users navigate dates from the week strip above.
- Next: [Daily, Weekly, Monthly & Yearly Views](https://demo.mobiscroll.com/vue/agenda/daily-weekly-monthly-annual-agenda.md) - Build a Vue agenda list view that switches between daily, weekly, monthly, and yearly modes — display events for a single or multiple consecutive periods.