---
title: "Vue Agenda Event Hooks Example | Mobiscroll"
component: "Agenda"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/agenda/event-hooks"
---

# Event Hooks - Vue Agenda demo

Customize the Vue event calendar agenda view with lifecycle hooks — respond to event clicks, init, and date changes. For Vue and Nuxt.

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

## Description

The agenda ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like `event-click`, `init`, `selected-date-change` ... will be triggered.

**For a complete list of events go to the documentation** [See available lifecycle events →](https://mobiscroll.com/docs/vue/eventcalendar/api#events)

## 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.
- **Event log** An Event log panel is shown at the left and lists the lifecycle events fired during interactions such as event creation, hover, drag, and similar actions.

## Best for

- **Lifecycle event discovery** Understanding which agenda lifecycle hooks fire during common user interactions.

## Tutorial

```js
<MbscEventcalendar
  @event-click="handleEventClick"
  @event-double-click="handleEventDoubleClick"
  @event-hover-in="handleEventHoverIn"
  @event-hover-out="handleEventHoverOut"
  @event-right-click="handleEventRightClick"
  @init="handleInit"
  @page-change="handlePageChange"
  @page-loaded="handlePageLoaded"
  @page-oading="handlePageLoading"
  @selected-date-change="handleSelectedDateChange"
/>
```

## 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
- [`destroy`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onDestroy) - event
- [`event-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventClick) - event
- [`event-double-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDoubleClick) - event
- [`event-hover-in`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventHoverIn) - event
- [`event-hover-out`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventHoverOut) - event
- [`event-right-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventRightClick) - event
- [`init`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onInit) - event
- [`page-change`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageChange) - event
- [`page-loaded`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageLoaded) - event
- [`page-loading`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageLoading) - event
- [`selected-date-change`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onSelectedDateChange) - event

## 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 myView = { agenda: { type: 'month' } }

function handleDestroy() {
  // Logic running on component destroy
  console.log('onDestroy')
}
function handleEventClick(args) {
  // Logic for event click
  console.log('onEventClick', args)
}
function handleEventDoubleClick(args) {
  // Logic for event double click
  console.log('onEventDoubleClick', args)
}
function handleEventHoverIn(args) {
  // Logic for event hover in
  console.log('onEventHoverIn', args)
}
function handleEventHoverOut(args) {
  // Logic for event hover out
  console.log('onEventHoverOut', args)
}
function handleEventRightClick(args) {
  // Logic for event right click
  console.log('onEventRightClick', args)
}
function handleInit() {
  // Logic running on component init
  console.log('onInit')
}
function handlePageChange(args) {
  // Logic running on calendar page change
  console.log('onPageChange', args)
}
function handlePageLoaded(args) {
  // Use it to inject custom markup & attach custom listeners
  console.log('onPageLoaded', args)
}
function handlePageLoading(args) {
  // Use it to load data on demand
  console.log('onPageLoading', args)
}
function handleSelectedDateChange(args) {
  // Use it to keep track of the selected date externally
  console.log('onSelectedDateChange', args)
}

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

<template>
  <MbscEventcalendar
    :data="myEvents"
    :view="myView"
    @destroy="handleDestroy"
    @event-click="handleEventClick"
    @event-double-click="handleEventDoubleClick"
    @event-hover-in="handleEventHoverIn"
    @event-hover-out="handleEventHoverOut"
    @event-right-click="handleEventRightClick"
    @init="handleInit"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @selected-date-change="handleSelectedDateChange"
  />
</template>
```

### SFC TS

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

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

const myEvents = ref<MbscCalendarEvent[]>([])
const myView: MbscEventcalendarView = { agenda: { type: 'month' } }

function handleDestroy() {
  // Logic running on component destroy
  console.log('onDestroy')
}
function handleEventClick(args: MbscEventClickEvent) {
  // Logic for event click
  console.log('onEventClick', args)
}
function handleEventDoubleClick(args: MbscEventClickEvent) {
  // Logic for event double click
  console.log('onEventDoubleClick', args)
}
function handleEventHoverIn(args: MbscEventClickEvent) {
  // Logic for event hover in
  console.log('onEventHoverIn', args)
}
function handleEventHoverOut(args: MbscEventClickEvent) {
  // Logic for event hover out
  console.log('onEventHoverOut', args)
}
function handleEventRightClick(args: MbscEventClickEvent) {
  // Logic for event right click
  console.log('onEventRightClick', args)
}
function handleInit() {
  // Logic running on component init
  console.log('onInit')
}
function handlePageChange(args: MbscPageChangeEvent) {
  // Logic running on calendar page change
  console.log('onPageChange', args)
}
function handlePageLoaded(args: MbscPageLoadedEvent) {
  // Use it to inject custom markup & attach custom listeners
  console.log('onPageLoaded', args)
}
function handlePageLoading(args: MbscPageLoadingEvent) {
  // Use it to load data on demand
  console.log('onPageLoading', args)
}
function handleSelectedDateChange(args: MbscSelectedDateChangeEvent) {
  // Use it to keep track of the selected date externally
  console.log('onSelectedDateChange', args)
}

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

<template>
  <MbscEventcalendar
    :data="myEvents"
    :view="myView"
    @destroy="handleDestroy"
    @event-click="handleEventClick"
    @event-double-click="handleEventDoubleClick"
    @event-hover-in="handleEventHoverIn"
    @event-hover-out="handleEventHoverOut"
    @event-right-click="handleEventRightClick"
    @init="handleInit"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @selected-date-change="handleSelectedDateChange"
  />
</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()`. For the imperative API, call `inst.setEvents(events)` in the callback.
- Wire all lifecycle hooks on the `Eventcalendar` component. Each handler receives an `args` object (except `onInit` and `onDestroy`). Group the hooks by purpose:
  - **Initialization**: `onInit` - fires once when the component initialises; `onDestroy` - fires on teardown.
  - **Event interaction**: `onEventClick`, `onEventDoubleClick`, `onEventHoverIn`, `onEventHoverOut`, `onEventRightClick` - each receives `args` with the event data and DOM event.
  - **Page lifecycle**: `onPageChange` - fires when the calendar navigates to a new page; `onPageLoading` - use this to load data on demand; `onPageLoaded` - use this to inject custom markup or attach DOM listeners after rendering.
  - **Date tracking**: `onSelectedDateChange` - fires when the selected date changes; use it to keep external state in sync.
- In this demo all handlers log to the console as a reference implementation. Replace each handler body with the application-specific logic needed.

## 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: [Multi-Calendar Support](https://demo.mobiscroll.com/vue/agenda/gregorian-jalali-hijri.md) - Display events in a Vue agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale.