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
<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 */ }}
/>Event log
JSXTSX
import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
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;
import {
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscEventClickEvent,
MbscPageChangeEvent,
MbscPageLoadedEvent,
MbscPageLoadingEvent,
MbscSelectedDateChangeEvent,
setOptions ,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
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;