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

# Event Hooks - JavaScript Agenda demo

Customize the Javascript event calendar agenda view with lifecycle hooks — respond to event clicks, init, and date changes. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/agenda/event-hooks)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/agenda/event-hooks)
- This demo in other frameworks: [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), [Vue](https://demo.mobiscroll.com/vue/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 `onEventClick`, `onInit`, `onSelectedDateChange` ... will be triggered.

**For a complete list of events go to the documentation** [See available lifecycle events →](https://mobiscroll.com/docs/javascript/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
onDestroy: function (event, inst) { /* Logic for destroying the event calendar */ },
onEventClick: function (event, inst) { /* Logic for event click */ },
onEventDoubleClick: function (event, inst) { /* Logic for event double click */ },
onEventHoverIn: function (event, inst) { /* Logic for event hover in */ },
onEventHoverOut: function (event, inst) { /* Logic for event hover out */ },
onEventRightClick: function (event, inst) { /* Logic for event right click */ },
onInit: function (event, inst) { /* Logic running on component init */ },
onPageChange: function (event, inst) { /* Your custom event handler goes here */ },
onPageLoaded: function (event, inst) { /* Use it to inject custom markup & attach custom listeners */  },
onPageLoading: function (event, inst) { /* Use it to load data on demand */ },
onSelectedDateChange: function (event, inst) { /* Use it to keep track of the selected date externally */ }
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`onDestroy`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onDestroy) - event
- [`onEventClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventClick) - event
- [`onEventDoubleClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDoubleClick) - event
- [`onEventHoverIn`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverIn) - event
- [`onEventHoverOut`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverOut) - event
- [`onEventRightClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventRightClick) - event
- [`onInit`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onInit) - event
- [`onPageChange`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageChange) - event
- [`onPageLoaded`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoaded) - event
- [`onPageLoading`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoading) - event
- [`onSelectedDateChange`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onSelectedDateChange) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var inst = mobiscroll.eventcalendar('#demo-event-hooks', {
  view: {
    agenda: { type: 'month' },
  },
  onDestroy: function () {
    // Logic running on component destroy
    console.log('onDestroy');
  },
  onEventClick: function (args) {
    // Logic for event click
    console.log('onEventClick', args);
  },
  onEventDoubleClick: function (args) {
    // Logic for event double click
    console.log('onEventDoubleClick', args);
  },
  onEventHoverIn: function (args) {
    // Logic for event hover in
    console.log('onEventHoverIn', args);
  },
  onEventHoverOut: function (args) {
    // Logic for event hover out
    console.log('onEventHoverOut', args);
  },
  onEventRightClick: function (args) {
    // Logic for event right click
    console.log('onEventRightClick', args);
  },
  onInit: function () {
    // Logic running on component init
    console.log('onInit');
  },
  onPageChange: function (args) {
    // Logic running on calendar page change
    console.log('onPageChange', args);
  },
  onPageLoaded: function (args) {
    // Use it to inject custom markup & attach custom listeners
    console.log('onPageLoaded', args);
  },
  onPageLoading: function (args) {
    // Use it to load data on demand
    console.log('onPageLoading', args);
  },
  onSelectedDateChange: function (args) {
    // Use it to keep track of the selected date externally
    console.log('onSelectedDateChange', args);
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
<div id="demo-event-hooks"></div>
```

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Next: [Multi-Calendar Support](https://demo.mobiscroll.com/javascript/agenda/gregorian-jalali-hijri.md) - Display events in a Javascript agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale.