---
title: "Angular Scheduler Event Hooks Example | Mobiscroll"
component: "Scheduler"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/scheduler/event-hooks"
---

# Event Hooks - Angular Scheduler demo

Explore Angular Scheduler lifecycle hooks — see which callbacks fire on event click, init, or date change in the live event log.

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

## Description

The scheduler 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/angular/eventcalendar/api#events)

## What this demo shows

- A desktop daily scheduler with date navigation, multiple resources, and a vertically scrollable time grid for the selected day.
- **External drag & drop** Two external events are shown above the scheduler 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 in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between days and jump back to the current day.
- **Day header** The short weekday name and the selected date are shown below the main navigation.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Resource strip** Three resources are displayed across the scheduler: `Ryan`, `Kate`, and `John`.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected day.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Current time** A horizontal blue line marks the current time across the scheduler.
- **Hover feedback** Hovering over the time grid shows a time indicator that follows the pointer in 15-minute increments.
- **Timed events** Events are displayed as colored cards with a colored left stripe, the event title, and the exact start and end time.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles when the event allows those interactions.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

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

## Tutorial

```html
<mbsc-eventcalendar
    (onCellClick)="onCellClick($event)"
    (onCellDoubleClick)="onCellDoubleClick($event)"
    (onCellRightClick)="onCellRightClick($event)"
    (onCellHoverIn)="onCellHoverIn($event)"
    (onCellHoverOut)="onCellHoverOut($event)"
    (onDestroy)="onDestroy($event)"
    (onEventClick)="onEventClick($event)"
    (onEventCreate)="onEventCreate($event)"
    (onEventCreated)="onEventCreated($event)"
    (onEventCreateFailed)="onEventCreateFailed($event)"
    (onEventDelete)="onEventDelete($event)"
    (onEventDeleted)="onEventDeleted($event)"
    (onEventDoubleClick)="onEventDoubleClick($event)"
    (onEventDragEnd)="onEventDragEnd($event)"
    (onEventDragStart)="onEventDragStart($event)"
    (onEventDragEnter)="onEventDragEnter($event)"
    (onEventDragLeave)="onEventDragLeave($event)"
    (onEventHoverIn)="onEventHoverIn($event)"
    (onEventHoverOut)="onEventHoverOut($event)"
    (onEventRightClick)="onEventRightClick($event)"
    (onEventUpdate)="onEventUpdate($event)"
    (onEventUpdated)="onEventUpdated($event)"
    (onEventUpdateFailed)="onEventUpdateFailed($event)"
    (onInit)="onInit($event)"
    (onPageChange)="onPageChange($event)"
    (onPageLoaded)="onPageLoaded($event)"
    (onPageLoading)="onPageLoading($event)"
    (onResourceClick)="onResourceClick($event)"
    (onResourceDoubleClick)="onResourceDoubleClick($event)"
    (onResourceRightClick)="onResourceRightClick($event)"
    (onResourceHoverIn)="onResourceHoverIn($event)"
    (onResourceHoverOut)="onResourceHoverOut($event)"
    (onSelectedDateChange)="onSelectedDateChange($event)">
</mbsc-eventcalendar>
```

```ts
onCellClick(event: any): void { /* Logic for cell click */ }
onCellDoubleClick(event: any): void { /* Logic for cell double click */ }
onCellRightClick(event: any): void { /* Logic for cell right click */ }
onCellHoverIn(event: any): void { /* Logic for cell hover in */ }
onCellHoverOut(event: any): void { /* Logic for cell hover out */ }
onDestroy(event: any): void { /* Your custom event handler goes here */ }
onEventClick(event: any): void { /* Logic for event click */ }
onEventCreate(event: any): void { /* Logic for event create */ }
onEventCreated(event: any): void { /* Logic for event created */ }
onEventCreateFailed(event: any): void { /* Logic for failed event create */ }
onEventDelete(event: any): void { /* Logic for event delete */ }
onEventDeleted(event: any): void { /* Logic for event deleted */ }
onEventDoubleClick(event: any): void { /* Logic for event double click */ }
onEventDragEnd(event: any): void { /* Triggered when event drag ends */ }
onEventDragStart(event: any): void { /* Triggered when event drag is started */ }
onEventDragEnter(event: any): void { /* Triggered when a dragged event enters the calendar */ }
onEventDragLeave(event: any): void { /* Triggered when a dragged event leaves the calendar */ }
onEventHoverIn(event: any): void { /* Logic for event hover in */ }
onEventHoverOut(event: any): void { /* Logic for event hover out */ }
onEventRightClick(event: any): void { /* Logic for event right click */ }
onEventUpdate(event: any): void { /* Logic for event update */ }
onEventUpdated(event: any): void { /* This is where you save the updated event to your DB */ }
onEventUpdateFailed(event: any): void { /* Logic for event update */ }
onInit(event: any): void { /* Logic running on component init */ }
onPageChange(event: any): void { /* Your custom event handler goes here */ }
onPageLoaded(event: any): void { /* Use it to inject custom markup & attach custom listeners */ }
onPageLoading(event: any): void { /* Use it to load data on demand */ }
onResourceClick(event: any): void { /* Logic for resource click */ }
onResourceDoubleClick(event: any): void { /* Logic for resource double click */ }
onResourceRightClick(event: any): void { /* Logic for resource right click */ }
onResourceHoverIn(event: any): void { /* Logic for resource hover in */ }
onResourceHoverOut(event: any): void { /* Logic for resource hover out */ }
onSelectedDateChange(event: any): void { /* Use it to keep track of the selected date externall */ }
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`invalid`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-invalid) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option
- [`externalDrop`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-externalDrop) - option
- [`onDestroy`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onDestroy) - event
- [`onEventClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventClick) - event
- [`onEventCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventCreate) - event
- [`onEventCreated`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventCreated) - event
- [`onEventCreateFailed`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventCreateFailed) - event
- [`onEventDelete`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventDelete) - event
- [`onEventDeleted`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventDeleted) - event
- [`onEventDragStart`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventDragStart) - event
- [`onEventDragEnd`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventDragEnd) - event
- [`onEventDragEnter`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventDragEnter) - event
- [`onEventDragLeave`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventDragLeave) - event
- [`onEventUpdate`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventUpdate) - event
- [`onEventUpdated`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventUpdated) - event
- [`onEventUpdateFailed`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventUpdateFailed) - event
- [`onInit`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onInit) - event
- [`onPageChange`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onPageChange) - event
- [`onPageLoaded`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onPageLoaded) - event
- [`onPageLoading`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onPageLoading) - event
- [`onResourceClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onResourceClick) - event
- [`onResourceDoubleClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onResourceDoubleClick) - event
- [`onResourceRightClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onResourceRightClick) - event
- [`onResourceHoverIn`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onResourceHoverIn) - event
- [`onResourceHoverOut`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onResourceHoverOut) - event
- [`onSelectedDateChange`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onSelectedDateChange) - event
- [`onCellClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onCellClick) - event
- [`onCellHoverIn`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onCellHoverIn) - event
- [`onCellHoverOut`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onCellHoverOut) - event

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, MbscResource, setOptions } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  myEvents: MbscCalendarEvent[] = [];
  invalid = [
    {
      start: '12:00',
      end: '13:00',
      title: 'Lunch break',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO,TU,WE,TH,FR',
      },
    },
  ];
  view: MbscEventcalendarView = {
    scheduler: {
      type: 'day',
    },
  };

  myResources: MbscResource[] = [
    {
      id: 1,
      name: 'Ryan',
      color: '#f7c4b4',
    },
    {
      id: 2,
      name: 'Kate',
      color: '#c6f1c9',
    },
    {
      id: 3,
      name: 'John',
      color: '#e8d0ef',
    },
  ];

  onCellClick(): void {
    /* Logic for cell click */
  }
  onCellDoubleClick(): void {
    /* Logic for cell double click */
  }
  onCellRightClick(): void {
    /* Logic for cell right click */
  }
  onCellHoverIn(): void {
    /* Logic for cell hover in */
  }
  onCellHoverOut(): void {
    /* Logic for cell hover out */
  }
  onDestroy(): void {
    // Your custom event handler goes here
  }
  onEventClick(): void {
    // Logic for event click
  }
  onEventCreate(): void {
    // Logic for event create
  }
  onEventCreated(): void {
    // Logic for event created
  }
  onEventCreateFailed(): void {
    // Logic for failed event create
  }
  onEventDelete(): void {
    // Logic for event delete
  }
  onEventDeleted(): void {
    // Logic for event deleted
  }
  onEventDoubleClick(): void {
    // Logic for event double click
  }
  onEventDragStart(): void {
    // Logic for event drag start
  }
  onEventDragEnd(): void {
    // Logic for event drag end
  }
  onEventDragEnter(): void {
    // Logic for event drag enter
  }
  onEventDragLeave(): void {
    // Logic for event drag leave
  }
  onEventHoverIn(): void {
    // Logic for event hover in
  }
  onEventHoverOut(): void {
    // Logic for event hover out
  }
  onEventUpdate(): void {
    // Logic for event update
  }
  onEventUpdated(): void {
    // Logic for event updated
  }
  onEventUpdateFailed(): void {
    // Logic for event update
  }
  onEventRightClick(): void {
    // Logic for event right click
  }
  onInit(): void {
    // Logic running on component init
  }
  onPageChange(): void {
    // Your custom event handler goes here
  }
  onPageLoaded(): void {
    // Use it to inject custom markup & attach custom listeners
  }
  onPageLoading(): void {
    // Use it to load data on demand
  }
  onResourceClick(): void {
    // Logic for resource click
  }
  onResourceDoubleClick(): void {
    // Logic for resource double click
  }
  onResourceRightClick(): void {
    // Logic for resource right click
  }
  onResourceHoverIn(): void {
    // Logic for resource hover in
  }
  onResourceHoverOut(): void {
    // Logic for resource hover out
  }
  onSelectedDateChange(): void {
    // Use it to keep track of the selected date externally
  }

  dragData1 = {
    title: 'External drag 1',
    color: '#ffdab8',
  };

  dragData2 = {
    title: 'External drag 2',
    color: '#ddfcf7',
  };

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/resource-events/', 'callback').subscribe((resp) => {
      this.myEvents = resp;
    });
  }
}
```

### Template

```html
<div mbsc-draggable [dragData]="dragData1" class="event-hooks-draggable" [ngStyle]="{background: '#ffdab8'}">
  <div class="draggable-title">External drag 1</div>
  <div class="draggable-text">Drag me to calendar</div>
</div>

<div mbsc-draggable [dragData]="dragData2" class="event-hooks-draggable" [ngStyle]="{background: '#ddfcf7'}">
  <div class="draggable-title">External drag 1</div>
  <div class="draggable-text">Drag me to calendar</div>
</div>

<mbsc-eventcalendar
  [data]="myEvents"
  [resources]="myResources"
  [view]="view"
  [invalid]="invalid"
  [dragToCreate]="true"
  [dragToMove]="true"
  [dragToResize]="true"
  [externalDrop]="true"
  (onDestroy)="onDestroy()"
  (onEventClick)="onEventClick()"
  (onEventCreate)="onEventCreate()"
  (onEventCreated)="onEventCreated()"
  (onEventCreateFailed)="onEventCreateFailed()"
  (onEventDelete)="onEventDelete()"
  (onEventDeleted)="onEventDeleted()"
  (onEventDragStart)="onEventDragStart()"
  (onEventDragEnd)="onEventDragEnd()"
  (onEventDragEnter)="onEventDragEnter()"
  (onEventDragLeave)="onEventDragLeave()"
  (onEventUpdate)="onEventUpdate()"
  (onEventUpdated)="onEventUpdated()"
  (onEventUpdateFailed)="onEventUpdateFailed()"
  (onInit)="onInit()"
  (onPageChange)="onPageChange()"
  (onPageLoaded)="onPageLoaded()"
  (onPageLoading)="onPageLoading()"
  (onResourceClick)="onResourceClick()"
  (onResourceDoubleClick)="onResourceDoubleClick()"
  (onResourceRightClick)="onResourceRightClick()"
  (onResourceHoverIn)="onResourceHoverIn()"
  (onResourceHoverOut)="onResourceHoverOut()"
  (onSelectedDateChange)="onSelectedDateChange()"
  (onCellClick)="onCellClick()"
  (onCellHoverIn)="onCellHoverIn()"
  (onCellHoverOut)="onCellHoverOut()"
></mbsc-eventcalendar>
```

### 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 `view: { scheduler: { type: 'day' } }`.
- Define 3 resources (Ryan, Kate, John) with `id`, `name`, and `color`. Load events from `https://trial.mobiscroll.com/resource-events/` via JSONP: React/Vue call `getJson(url, callback, 'jsonp')`; JS calls `mobiscroll.getJson(url, callback, 'jsonp')`; jQuery calls `$.getJSON(url + '&callback=?', callback)`; Angular uses `HttpClient.jsonp()`. React/Angular/Vue: in the callback, assign the fetched array to the state/property bound to the `data` prop. Imperative API (JS/jQuery): call `inst.setEvents(events)` in the callback.
- Add an `invalid` entry blocking `12:00–13:00` recurring weekly on `MO,TU,WE,TH,FR` (titled "Lunch break") - all frameworks use the same pattern.
- Enable `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`, and `externalDrop: true`.
- **External draggables** - elements outside the calendar can be made draggable into it via `dragData: { title, color }`. React/Vue: use `Draggable` / `MbscDraggable` component with `dragData` and `element` (ref) props. Angular: use the `mbsc-draggable` directive with `[dragData]`. JS/jQuery: use the `mbsc-draggable` attribute with `data-drag-data` as a JSON string.
- **All lifecycle hooks** - register every available hook as an empty handler, grouped 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`
  - **Page / lifecycle**: `onInit`, `onDestroy`, `onPageChange`, `onPageLoaded`, `onPageLoading`, `onSelectedDateChange`

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

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

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

## Related demos

- Previous: [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/angular/scheduler/gregorian-jalali-hijri.md) - Configure the Angular Scheduler to display Gregorian, Jalali, or Hijri dates — each calendar system loads its locale and language pack automatically.
- Next: [Localization](https://demo.mobiscroll.com/angular/scheduler/localization.md) - Add multi-language support to the Angular Scheduler — 37 locales, RTL layout, and localized date/time formats, with all settings overridable.