Event Hooks
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 →
Demo
html<mbsc-eventcalendar
(onDestroy)="onDestroy($event)"
(onEventClick)="onEventClick($event)"
(onEventDoubleClick)="onEventDoubleClick($event)"
(onEventHoverIn)="onEventHoverIn($event)"
(onEventHoverOut)="onEventHoverOut($event)"
(onEventRightClick)="onEventRightClick($event)"
(onInit)="onInit($event)"
(onPageChange)="onPageChange($event)"
(onPageLoaded)="onPageLoaded($event)"
(onPageLoading)="onPageLoading($event)"
(onSelectedDateChange)="onSelectedDateChange($event)">
</mbsc-eventcalendar>
tsonDestroy(event: any): void { /* Your custom event handler goes here */ }
onEventClick(event: any): void { /* Logic for event click */ }
onEventDoubleClick(event: any): void { /* Logic for event double click */ }
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 */ }
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 */ }
onSelectedDateChange(event: any): void { /* Use it to keep track of the selected date externall */ } Event log
ComponentTemplate
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
MbscCalendarEvent,
MbscEventcalendarView,
MbscEventClickEvent,
MbscModule,
MbscPageChangeEvent,
MbscPageLoadedEvent,
MbscPageLoadingEvent,
MbscSelectedDateChangeEvent,
setOptions ,
} from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) {}
myEvents: MbscCalendarEvent[] = [];
myView: MbscEventcalendarView = { agenda: { type: 'month' } };
onDestroy(): void {
// Logic running on component destroy
console.log('onDestroy');
}
onEventClick(args: MbscEventClickEvent): void {
// Logic for event click
console.log('onEventClick', args);
}
onEventDoubleClick(args: MbscEventClickEvent): void {
// Logic for event double click
console.log('onEventDoubleClick', args);
}
onEventHoverIn(args: MbscEventClickEvent): void {
// Logic for event hover in
console.log('onEventHoverIn', args);
}
onEventHoverOut(args: MbscEventClickEvent): void {
// Logic for event hover out
console.log('onEventHoverOut', args);
}
onEventRightClick(args: MbscEventClickEvent): void {
// Logic for event right click
console.log('onEventRightClick', args);
}
onInit(): void {
// Logic running on component init
console.log('onInit');
}
onPageChange(args: MbscPageChangeEvent): void {
// Logic running on calendar page change
console.log('onPageChange', args);
}
onPageLoaded(args: MbscPageLoadedEvent): void {
// Use it to inject custom markup & attach custom listeners
console.log('onPageLoaded', args);
}
onPageLoading(args: MbscPageLoadingEvent): void {
// Use it to load data on demand
console.log('onPageLoading', args);
}
onSelectedDateChange(args: MbscSelectedDateChangeEvent): void {
// Use it to keep track of the selected date
console.log('onSelectedDateChange', args);
}
ngOnInit(): void {
this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events/?vers=5', 'callback').subscribe((resp) => {
this.myEvents = resp;
});
}
}
<mbsc-eventcalendar
[data]="myEvents"
[view]="myView"
(onDestroy)="onDestroy()"
(onEventClick)="onEventClick($event)"
(onEventDoubleClick)="onEventDoubleClick($event)"
(onEventHoverIn)="onEventHoverIn($event)"
(onEventHoverOut)="onEventHoverOut($event)"
(onEventRightClick)="onEventRightClick($event)"
(onInit)="onInit()"
(onPageChange)="onPageChange($event)"
(onPageLoaded)="onPageLoaded($event)"
(onPageLoading)="onPageLoading($event)"
(onSelectedDateChange)="onSelectedDateChange($event)"
></mbsc-eventcalendar>