---
title: "JQuery Timeline Event Hooks Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/event-hooks"
---

# Event Hooks - jQuery Timeline demo

Explore JQuery Timeline lifecycle hooks — see hooks fire on event clicks, initialization, and date changes, tracked in a live event log. For jQuery or jQuery Mobile.

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

## Description

The timeline 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/jquery/eventcalendar/api#events)

## What this demo shows

- A desktop daily timeline where hours are arranged horizontally and a hierarchical resource tree arranged vertically on the left.
- **External drag & drop** Three external events are shown above the timeline and can be dragged onto the day view.
- **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.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between days and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected days, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** The left side shows expandable and collapsible resource groups, including parent groups and draggable resources.
- **Resource hierarchy** Nested resources are grouped under parent rows, before listing individual resources.
- **Resource template** Each resource header shows the resource name in bold.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events are shown as colored cards with a left color stripe, a bold title, a description, and a bold time range.
- **Date positioning** Events are positioned by their assigned resource and exact date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

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

## Tutorial

```js
onCellClick: function (event, inst) { /* Logic for cell click */ },
onCellDoubleClick: function (event, inst) { /* Logic for cell double click */ },
onCellRightClick: function (event, inst) { /* Logic for cell right click */ },
onCellHoverIn: function (event, inst) { /* Logic for cell hover in */ },
onCellHoverOut: function (event, inst) { /* Logic for cell hover out */ },
onDestroy: function (event, inst) { /* Logic for destroying the event calendar */ },
onEventClick: function (event, inst) { /* Logic for event click */ },
onEventCreate: function (event, inst) { /* Logic for event create */ },
onEventCreated: function (event, inst) { /* Logic for event created */ },
onEventCreateFailed: function (event, inst) { /* Logic for failed event create */ },
onEventDelete: function (event, inst) { /* Logic for event delete */ },
onEventDeleted: function (event, inst) { /* Logic for event deleted */ },
onEventDoubleClick: function (event, inst) { /* Logic for event double click */ },
onEventDragEnd: function (event, inst) { /* Triggered when event drag ends */ },
onEventDragStart: function (event, inst) { /* Triggered when event drag is started */ },
onEventDragEnter: function (event, inst) { /* Triggered when a dragged event enters the calendar */ }
onEventDragLeave: function (event, inst) { /* Triggered when a dragged event leaves the calendar */ }
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 */ },
onEventUpdate: function (event, inst) { /* Logic for event update */ },
onEventUpdated: function (event, inst) { /* This is where you save the updated event to your DB */ },
onEventUpdateFailed: function (event, inst) { /* Logic for failed event update */ },
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 */ },
onResourceClick: function (event, inst) { /* Logic for resource click */ },
onResourceDoubleClick: function (event, inst) { /* Logic for resource double click */ },
onResourceExpand: function (event, inst) { /* Use it to load child resources on demand */ },
onResourceDragEnd: function (event, inst) {  /* Triggered when resource drag is started */ }
onResourceDragStart: function (event, inst) {  /* Triggered when resource drag ends */ }
onResourceCollapse: function (event, inst) { /* Use it to unload child resources on demand */ },
onResourceCreate: function () { /* Logic for resource create */ },
onResourceCreated: function () { /* Logic for resource created */ },
onResourceDelete: function () { /* Logic for resource delete */ },
onResourceDeleted: function () {/* Logic for resource deleted */ },
onResourceDragEnter: function () {/* Logic for resource update */ },
onResourceDragLeave: function () {/* Logic for resource update */ },
onResourceOrderUpdate: function (event, inst) { /* Logic for resource update */ },
onResourceRightClick: function (event, inst) { /* Logic for resource right click */ },
onResourceHoverIn: function (event, inst) { /* Logic for resource hover in */ },
onResourceHoverOut: function (event, inst) { /* Logic for resource hover out */ },
onSelectedDateChange: function (event, inst) { /* Use it to keep track of the selected date externally */ }
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`externalDrop`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-externalDrop) - option
- [`externalResourceDrop`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-externalResourceDrop) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`invalid`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-invalid) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`onCellClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onCellClick) - event
- [`onCellDoubleClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onCellDoubleClick) - event
- [`onCellRightClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onCellRightClick) - event
- [`onCellHoverIn`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onCellHoverIn) - event
- [`onCellHoverOut`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onCellHoverOut) - event
- [`onDestroy`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onDestroy) - event
- [`onEventClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventClick) - event
- [`onEventCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventCreate) - event
- [`onEventCreated`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventCreated) - event
- [`onEventCreateFailed`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventCreateFailed) - event
- [`onEventDelete`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDelete) - event
- [`onEventDeleted`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDeleted) - event
- [`onEventDoubleClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDoubleClick) - event
- [`onEventDragStart`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDragStart) - event
- [`onEventDragEnd`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDragEnd) - event
- [`onEventDragEnter`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDragEnter) - event
- [`onEventDragLeave`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDragLeave) - event
- [`onEventHoverIn`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverIn) - event
- [`onEventHoverOut`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverOut) - event
- [`onEventUpdate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventUpdate) - event
- [`onEventUpdated`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventUpdated) - event
- [`onEventUpdateFailed`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventUpdateFailed) - event
- [`onEventRightClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventRightClick) - event
- [`onInit`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onInit) - event
- [`onPageChange`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onPageChange) - event
- [`onPageLoaded`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onPageLoaded) - event
- [`onPageLoading`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onPageLoading) - event
- [`onResourceClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceClick) - event
- [`onResourceDoubleClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceDoubleClick) - event
- [`onResourceOrderUpdate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceOrderUpdate) - event
- [`onResourceCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceCreate) - event
- [`onResourceDelete`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceDelete) - event
- [`onResourceRightClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceRightClick) - event
- [`onResourceHoverIn`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceHoverIn) - event
- [`onResourceHoverOut`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onResourceHoverOut) - event
- [`onSelectedDateChange`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onSelectedDateChange) - event
- [`setEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

$(function () {
  var inst = $('#demo')
    .mobiscroll()
    .eventcalendar({
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      externalDrop: true,
      externalResourceDrop: true,
      view: {
        timeline: {
          type: 'day',
          resourceReorder: true,
        },
      },
      invalid: [
        {
          start: '12:00',
          end: '13:00',
          title: 'Lunch break',
          recurring: {
            repeat: 'weekly',
            weekDays: 'MO,TU,WE,TH,FR',
          },
        },
      ],
      resources: [
        {
          id: 1,
          name: 'Ryan',
          color: '#fdf500',
        },
        {
          id: 2,
          name: 'Kate',
          color: '#ff4600',
        },
        {
          id: 3,
          name: 'John',
          color: '#ff0101',
        },
        {
          id: 4,
          name: 'Mark',
          color: '#239a21',
        },
        {
          id: 5,
          name: 'Sharon',
          color: '#8f1ed6',
        },
        {
          id: 6,
          name: 'Ashley',
          color: '#01adff',
        },
      ],
      onCellClick: function () {
        // Logic for cell click
      },
      onCellDoubleClick: function () {
        // Logic for cell double click
      },
      onCellRightClick: function () {
        // Logic for cell right click
      },
      onCellHoverIn: function () {
        // Logic for cell hover in
      },
      onCellHoverOut: function () {
        // Logic for cell hover out
      },
      onDestroy: function () {
        // Logic for destroying the event calendar
      },
      onEventClick: function () {
        // Logic for event click
      },
      onEventCreate: function () {
        // Logic for event create
      },
      onEventCreated: function () {
        // Logic for event created
      },
      onEventCreateFailed: function () {
        // Logic for failed event create
      },
      onEventDelete: function () {
        // Logic for event delete
      },
      onEventDeleted: function () {
        // Logic for event deleted
      },
      onEventDoubleClick: function () {
        // Logic for event double click
      },
      onEventDragStart: function () {
        // Logic for event drag start
      },
      onEventDragEnd: function () {
        // Logic for event drag end
      },
      onEventDragEnter: function () {
        // Logic for event drag enter
      },
      onEventDragLeave: function () {
        // Logic for event drag leave
      },
      onEventHoverIn: function () {
        // Logic for event hover in
      },
      onEventHoverOut: function () {
        // Logic for event hover out
      },
      onEventUpdate: function () {
        // Logic for event update
      },
      onEventUpdated: function () {
        // Logic for event updated
      },
      onEventUpdateFailed: function () {
        // Logic for failed event update
      },
      onEventRightClick: function () {
        // Logic for event right click
      },
      onInit: function () {
        // Logic running on component init
      },
      onPageChange: function () {
        // Your custom event handler goes here
      },
      onPageLoaded: function () {
        // Use it to inject custom markup & attach custom listeners
      },
      onPageLoading: function () {
        // Use it to load data on demand
      },
      onResourceClick: function () {
        // Logic for resource click
      },
      onResourceDoubleClick: function () {
        // Logic for resource double click
      },
      onResourceDragEnd: function () {
        /* Logic for resource drag end */
      },
      onResourceDragStart: function () {
        /* Logic for resource drag start */
      },
      onResourceOrderUpdate: function () {
        // Logic for resource update
      },
      onResourceCreate: function () {
        // Logic for resource create
      },
      onResourceCreated: function () {
        // Logic for resource created
      },
      onResourceDelete: function () {
        // Logic for resource delete
      },
      onResourceDeleted: function () {
        // Logic for resource deleted
      },
      onResourceDragEnter: function () {
        // Logic for resource update
      },
      onResourceDragLeave: function () {
        // Logic for resource update
      },
      onResourceRightClick: function () {
        // Logic for resource right click
      },
      onResourceHoverIn: function () {
        // Logic for resource hover in
      },
      onResourceHoverOut: function () {
        // Logic for resource hover out
      },
      onSelectedDateChange: function () {
        // Use it to keep track of the selected date externally
      },
    })
    .mobiscroll('getInst');

  $.getJSON(
    'https://trial.mobiscroll.com/timeline-events/?callback=?',
    function (events) {
      inst.setEvents(events);
    },
    'jsonp',
  );
});
```

### HTML

```html
<div mbsc-draggable data-drag-data='{"title": "External drag 1", "color": "#ffdab8"}' class="event-hooks-draggable" style="background: #ffdab8;">
    <div class="draggable-title">External drag 1</div>
    <div class="draggable-text">Drag me to calendar</div>
</div>
<div mbsc-draggable data-drag-data='{"title": "External drag 2", "color": "#ddfcf7"}' class="event-hooks-draggable" style="background: #ddfcf7;">
    <div class="draggable-title">External drag 2</div>
    <div class="draggable-text">Drag me to calendar</div>
</div>
<div mbsc-draggable data-drag-data='{"name": "External resource", "color": "#d19494"}' data-type="resource" class="event-hooks-draggable" style="background: #d19494;">
    <div class="draggable-title">External resource drag</div>
    <div class="draggable-text">Drag me to calendar</div>
</div>
<div id="demo"></div>
```

### CSS

```css
.event-hooks-draggable {
    padding: 10px 20px;
    display: inline-block;
    margin: 15px;
    border-radius: 8px;
    width: 210px;
}

.event-hooks-draggable .draggable-title {
    font-size: 16px;
    font-weight: 600;
}

.event-hooks-draggable .draggable-text {
    opacity: 0.7;
    line-height: 25px;
}

.event-hooks-draggable-1 {
    background: #ffdab8;
}

.event-hooks-draggable-2 {
    background: #ddfcf7;
}
```

## Implementation notes

- Use `timeline: { type: 'day', resourceReorder: true }` - a single-day view with drag-to-reorder resources enabled.
- Define 6 resources with `id`, `name`, and `color`.
- Load events from `https://trial.mobiscroll.com/timeline-events/` via JSONP using `getJson(url, callback, 'jsonp')`. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. Call `inst.setEvents(events)` for the imperative API.
- Add an `invalid` entry blocking 12:00-13:00 recurring on weekdays (`weekDays: 'MO,TU,WE,TH,FR'`).
- Enable all interactions: `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`, `externalDrop: true`, `externalResourceDrop: true`.
- **External draggables** - elements outside the calendar can be registered as Mobiscroll draggables:
  - Event draggables with `dragData: { title, color }` - when dropped onto the calendar, they create new events.
  - One resource draggable with `dragData: { name, color }` and `type="resource"` - when dropped onto the resource column, it creates a new resource row.
  - For the imperative API: use `mbsc-draggable` attribute with `data-drag-data` (JSON string) and `data-type="resource"` on the third card. For component frameworks, use the `Draggable` / `MbscDraggable` component with `dragData` and `type` props.
- **All lifecycle hooks** - register every available hook as an empty handler to catalog them. The handlers contain no logic; the purpose of the demo is to show what hooks exist. Group them by concern:
  - **Cell**: `onCellClick`, `onCellDoubleClick`, `onCellRightClick`, `onCellHoverIn`, `onCellHoverOut`
  - **Event interaction**: `onEventClick`, `onEventDoubleClick`, `onEventRightClick`, `onEventHoverIn`, `onEventHoverOut`
  - **Event create/update/delete**: `onEventCreate`, `onEventCreated`, `onEventCreateFailed`, `onEventDelete`, `onEventDeleted`, `onEventUpdate`, `onEventUpdated`, `onEventUpdateFailed`
  - **Event drag**: `onEventDragStart`, `onEventDragEnd`, `onEventDragEnter`, `onEventDragLeave`
  - **Resource**: `onResourceClick`, `onResourceDoubleClick`, `onResourceRightClick`, `onResourceHoverIn`, `onResourceHoverOut`, `onResourceCreate`, `onResourceCreated`, `onResourceDelete`, `onResourceDeleted`, `onResourceDragStart`, `onResourceDragEnd`, `onResourceDragEnter`, `onResourceDragLeave`, `onResourceOrderUpdate`
  - **Page / lifecycle**: `onInit`, `onDestroy`, `onPageChange`, `onPageLoaded`, `onPageLoading`, `onSelectedDateChange`
- Style each draggable card with padding, border-radius, and `display: inline-block` so they appear as clickable tiles above the calendar.

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

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

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

## Related demos

- Previous: [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/jquery/timeline/gregorian-jalali-hijri.md) - Use the JQuery Timeline with Gregorian, Jalali, or Hijri calendar systems — switch by locale to build scheduling interfaces for Persian.
- Next: [Multi-Language Support](https://demo.mobiscroll.com/jquery/timeline/localization.md) - Localize the JQuery Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support.