---
title: "React Agenda Event Hooks Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/agenda/event-hooks"
---

# Event Hooks - React Agenda demo

Handle agenda lifecycle events in the React event calendar — see which hooks fire on event click, init, and date change via a live event log. For React and Next.js.

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

```jsx
<Eventcalendar
    onDestroy = {(event, inst) => { /* Your custom event handler goes here */ }}
    onEventClick = {(event, inst) => { /* Logic for event click */ }}
    onEventDoubleClick = {(event, inst) => { /* Logic for event double click */ }}
    onEventHoverIn = {(event, inst) => { /* Logic for event hover in */ }}
    onEventHoverOut = {(event, inst) => { /* Logic for event hover out */ }}
    onEventRightClick = {(event, inst) => { /* Logic for event right click */ }}
    onLabelClick = {(event, inst) => { /* Logic for label click */ }}
    onPageChange = {(event, inst) => { /* Your custom event handler goes here */ }}
    onPageLoaded = {(event, inst) => { /* Use it to inject custom markup & attach custom listeners */ }}
    onPageLoading = {(event, inst) => { /* Use it to load data on demand */ }}
    onSelectedDateChange = {(event, inst) => { /* Use it to keep track of the selected date externally */ }}
/>
```

## API used in this demo

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

## Code

### JSX

```jsx
import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

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

function App() {
  const [myEvents, setEvents] = useState([]);

  const myView = useMemo(() => ({ agenda: { type: 'month' } }), []);

  const handleDestroy = useCallback(() => {
    // Logic running on component destroy
    console.log('onDestroy');
  }, []);

  const handleEventClick = useCallback((args) => {
    // Logic for event click
    console.log('onEventClick', args);
  }, []);

  const handleEventDoubleClick = useCallback((args) => {
    // Logic for event double click
    console.log('onEventDoubleClick', args);
  }, []);

  const handleEventHoverIn = useCallback((args) => {
    // Logic for event hover in
    console.log('onEventHoverIn', args);
  }, []);

  const handleEventHoverOut = useCallback((args) => {
    // Logic for event hover out
    console.log('onEventHoverOut', args);
  }, []);

  const handleEventRightClick = useCallback((args) => {
    // Logic for event right click
    console.log('onEventRightClick', args);
  }, []);

  const handleInit = useCallback(() => {
    // Logic running on component init
    console.log('onInit');
  }, []);

  const handlePageChange = useCallback((args) => {
    // Logic running on calendar page change
    console.log('onPageChange', args);
  }, []);

  const handlePageLoaded = useCallback((args) => {
    // Use it to inject custom markup & attach custom listeners
    console.log('onPageLoaded', args);
  }, []);

  const handlePageLoading = useCallback((args) => {
    // Use it to load data on demand
    console.log('onPageLoading', args);
  }, []);

  const handleSelectedDateChange = useCallback((args) => {
    // Use it to keep track of the selected date
    console.log('onSelectedDateChange', args);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Eventcalendar
      data={myEvents}
      view={myView}
      onDestroy={handleDestroy}
      onEventClick={handleEventClick}
      onEventDoubleClick={handleEventDoubleClick}
      onEventHoverIn={handleEventHoverIn}
      onEventHoverOut={handleEventHoverOut}
      onEventRightClick={handleEventRightClick}
      onInit={handleInit}
      onPageChange={handlePageChange}
      onPageLoaded={handlePageLoaded}
      onPageLoading={handlePageLoading}
      onSelectedDateChange={handleSelectedDateChange}
    />
  );
}

export default App;
```

### TSX

```tsx
import {
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventClickEvent,
  MbscPageChangeEvent,
  MbscPageLoadedEvent,
  MbscPageLoadingEvent,
  MbscSelectedDateChangeEvent,
  setOptions,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';

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

const App: FC = () => {
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);

  const myView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'month' } }), []);

  const handleDestroy = useCallback(() => {
    // Logic running on component destroy
    console.log('onDestroy');
  }, []);

  const handleEventClick = useCallback((args: MbscEventClickEvent) => {
    // Logic for event click
    console.log('onEventClick', args);
  }, []);

  const handleEventDoubleClick = useCallback((args: MbscEventClickEvent) => {
    // Logic for event double click
    console.log('onEventDoubleClick', args);
  }, []);

  const handleEventHoverIn = useCallback((args: MbscEventClickEvent) => {
    // Logic for event hover in
    console.log('onEventHoverIn', args);
  }, []);

  const handleEventHoverOut = useCallback((args: MbscEventClickEvent) => {
    // Logic for event hover out
    console.log('onEventHoverOut', args);
  }, []);

  const handleEventRightClick = useCallback((args: MbscEventClickEvent) => {
    // Logic for event right click
    console.log('onEventRightClick', args);
  }, []);

  const handleInit = useCallback(() => {
    // Logic running on component init
    console.log('onInit');
  }, []);

  const handlePageChange = useCallback((args: MbscPageChangeEvent) => {
    // Logic running on calendar page change
    console.log('onPageChange', args);
  }, []);

  const handlePageLoaded = useCallback((args: MbscPageLoadedEvent) => {
    // Use it to inject custom markup & attach custom listeners
    console.log('onPageLoaded', args);
  }, []);

  const handlePageLoading = useCallback((args: MbscPageLoadingEvent) => {
    // Use it to load data on demand
    console.log('onPageLoading', args);
  }, []);

  const handleSelectedDateChange = useCallback((args: MbscSelectedDateChangeEvent) => {
    // Use it to keep track of the selected date
    console.log('onSelectedDateChange', args);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Eventcalendar
      data={myEvents}
      view={myView}
      onDestroy={handleDestroy}
      onEventClick={handleEventClick}
      onEventDoubleClick={handleEventDoubleClick}
      onEventHoverIn={handleEventHoverIn}
      onEventHoverOut={handleEventHoverOut}
      onEventRightClick={handleEventRightClick}
      onInit={handleInit}
      onPageChange={handlePageChange}
      onPageLoaded={handlePageLoaded}
      onPageLoading={handlePageLoading}
      onSelectedDateChange={handleSelectedDateChange}
    />
  );
};

export default App;
```

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

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

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

## Related demos

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