Event Hooks
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 →
Demo
<Eventcalendar
onCellClick = {(event, inst) => { /* Logic for cell click */ }}
onCellDoubleClick = {(event, inst) => { /* Logic for cell double click */ }}
onCellRightClick = {(event, inst) => { /* Logic for cell right click */ }}
onCellHoverIn = {(event, inst) => { /* Logic for cell hover in */ }}
onCellHoverOut = {(event, inst) => { /* Logic for cell hover out */ }}
onDestroy = {(event, inst) => { /* Your custom event handler goes here */ }}
onEventClick = {(event, inst) => { /* Logic for event click */ }}
onEventCreate = {(event, inst) => { /* Logic for event create */ }}
onEventCreated = {(event, inst) => { /* Logic for event created */ }}
onEventCreateFailed = {(event, inst) => { /* Logic for failed event create */ }}
onEventDelete = {(event, inst) => { /* Logic for event delete */ }}
onEventDeleted = {(event, inst) => { /* Logic for event deleted */ }}
onEventDoubleClick = {(event, inst) => { /* Logic for event double click */ }}
onEventDragEnd = {(event, inst) => { /* Triggered when event drag ends */ }}
onEventDragStart = {(event, inst) => { /* Triggered when event drag is started */ }}
onEventDragEnter = {(event, inst) => { /* Triggered when a dragged event enters the calendar */ }}
onEventDragLeave = {(event, inst) => { /* Triggered when a dragged event leaves the calendar */ }}
onEventHoverIn = {(event, inst) => { /* Logic for event hover in */ }}
onEventHoverOut = {(event, inst) => { /* Logic for event hover out */ }}
onEventRightClick = {(event, inst) => { /* Logic for event right click */ }}
onEventUpdate = {(event, inst) => { /* Logic for event update */ }}
onEventUpdated = {(event, inst) => { /* This is where you save the updated event to your DB */ }}
onEventUpdateFailed = {(event, inst) => { /* Logic for failed event update */ }}
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 */ }}
onResourceClick = {(event, inst) => { /* Logic for resource click */ }}
onResourceDoubleClick = {(event, inst) => { /* Logic for resource double click */ }}
onResourceDragStart = {(event, inst) => { /* Triggered when resource drag ends */ }}
onResourceDragEnd = {(event, inst) => { /* Triggered when resource drag is started */ }
onResourceExpand: {(event, inst) => { /* Use it to load child resources on demand */ }}
onResourceOrderUpdate: {(event, inst) => { /* Logic for resource update */ }}
onResourceCreate={() => { /* Logic for resource create */ }}
onResourceCreated={() => { /* Logic for resource created */ }}
onResourceDelete={() => { /* Logic for resource delete */ }}
onResourceDeleted={() => { /* Logic for resource deleted */ }}
onResourceDragEnter={() => { /* Logic for resource update */ }}
onResourceDragLeave={() => { /* Logic for resource update */ }}
onResourceRightClick: {(event, inst) => { /* Logic for resource right click */ }}
onResourceHoverIn: {(event, inst) => { /* Logic for resource hover in */ }}
onResourceHoverOut: {(event, inst) => { /* Logic for resource hover out */ }}
onResourceCollapse: {(event, inst) => { /* Use it to unload child resources on demand */ }}
onSelectedDateChange = {(event, inst) => { /* Use it to keep track of the selected date externally */ }}
/>Event log
External drag 1
Drag me to calendar
External drag 2
Drag me to calendar
External resource
Drag me to calendar
JSXTSXCSS
import { Draggable, Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const dragData1 = {
title: 'External drag 1',
color: '#ffdab8',
};
const dragData2 = {
title: 'External drag 2',
color: '#ddfcf7',
};
const dragData3 = {
name: 'External resource',
color: '#d19494',
};
function App() {
const [myEvents, setEvents] = useState([]);
const [draggable1, setDraggable1] = useState();
const [draggable2, setDraggable2] = useState();
const [draggable3, setDraggable3] = useState();
const myInvalid = useMemo(
() => [
{
start: '12:00',
end: '13:00',
title: 'Lunch break',
recurring: {
repeat: 'weekly',
weekDays: 'MO,TU,WE,TH,FR',
},
},
],
[],
);
const myView = useMemo(
() => ({
timeline: {
type: 'day',
resourceReorder: true,
},
}),
[],
);
const myResources = useMemo(
() => [
{
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',
},
],
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/timeline-events/',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<>
<div ref={setDraggable1} className="event-hooks-draggable" style={{ background: '#ffdab8' }}>
<div className="draggable-title">External drag 1</div>
<div className="draggable-text">Drag me to calendar</div>
<Draggable dragData={dragData1} element={draggable1} />
</div>
<div ref={setDraggable2} className="event-hooks-draggable" style={{ background: '#ddfcf7' }}>
<div className="draggable-title">External drag 2</div>
<div className="draggable-text">Drag me to calendar</div>
<Draggable dragData={dragData2} element={draggable2} />
</div>
<div ref={setDraggable3} className="event-hooks-draggable" style={{ background: '#d19494' }}>
<div className="draggable-title">External resource</div>
<div className="draggable-text">Drag me to calendar</div>
<Draggable dragData={dragData3} element={draggable3} type="resource" />
</div>
<Eventcalendar
data={myEvents}
dragToCreate={true}
dragToMove={true}
dragToResize={true}
externalDrop={true}
externalResourceDrop={true}
view={myView}
resources={myResources}
invalid={myInvalid}
onCellClick={() => {
// Logic for cell click
}}
onCellDoubleClick={() => {
// Logic for cell double click
}}
onCellRightClick={() => {
// Logic for cell right click
}}
onCellHoverIn={() => {
// Logic for cell hover in
}}
onCellHoverOut={() => {
// Logic for cell hover out
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onEventClick={() => {
// Logic for event click
}}
onEventCreate={() => {
// Logic for event create
}}
onEventCreated={() => {
// Logic for event created
}}
onEventCreateFailed={() => {
// Logic for failed event create
}}
onEventDelete={() => {
// Logic for event delete
}}
onEventDeleted={() => {
// Logic for event deleted
}}
onEventDoubleClick={() => {
// Logic for event double click
}}
onEventDragEnter={() => {
// Logic for event drag enter
}}
onEventDragLeave={() => {
// Logic for event drag leave
}}
onEventHoverIn={() => {
// Logic for event hover in
}}
onEventHoverOut={() => {
// Logic for event hover out
}}
onEventUpdate={() => {
// Logic for event update
}}
onEventUpdated={() => {
// Logic for event updated
}}
onEventUpdateFailed={() => {
// Logic for failed event update
}}
onEventRightClick={() => {
// Logic for event right click
}}
onInit={() => {
// Logic running on component init
}}
onPageChange={() => {
// Your custom event handler goes here
}}
onPageLoaded={() => {
// Use it to inject custom markup & attach custom listeners
}}
onPageLoading={() => {
// Use it to load data on demand
}}
onResourceClick={() => {
// Logic for resource click
}}
onResourceDoubleClick={() => {
// Logic for resource double click
}}
onResourceDragEnd={() => {
/* Logic for resource drag end */
}}
onResourceDragStart={() => {
/* Logic for resource drag start */
}}
onResourceOrderUpdate={() => {
// Logic for resource update
}}
onResourceCreate={() => {
// Logic for resource create
}}
onResourceCreated={() => {
// Logic for resource created
}}
onResourceDelete={() => {
// Logic for resource delete
}}
onResourceDeleted={() => {
// Logic for resource deleted
}}
onResourceDragEnter={() => {
// Logic for resource update
}}
onResourceDragLeave={() => {
// Logic for resource update
}}
onResourceRightClick={() => {
// Logic for resource right click
}}
onResourceHoverIn={() => {
// Logic for resource hover in
}}
onResourceHoverOut={() => {
// Logic for resource hover out
}}
onSelectedDateChange={() => {
// Use it to keep track of the selected date externally
}}
/>
</>
);
}
export default App;
import {
Draggable,
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
setOptions ,
} from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const dragData1 = {
title: 'External drag 1',
color: '#ffdab8',
};
const dragData2 = {
title: 'External drag 2',
color: '#ddfcf7',
};
const dragData3 = {
name: 'External resource',
color: '#d19494',
};
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const [draggable1, setDraggable1] = useState<HTMLElement | null>(null);
const [draggable2, setDraggable2] = useState<HTMLElement | null>(null);
const [draggable3, setDraggable3] = useState<HTMLElement | null>(null);
const myInvalid = [
{
start: '12:00',
end: '13:00',
title: 'Lunch break',
recurring: {
repeat: 'weekly',
weekDays: 'MO,TU,WE,TH,FR',
},
},
];
const myView = useMemo<MbscEventcalendarView>(
() => ({
timeline: {
type: 'day',
resourceReorder: true,
},
}),
[],
);
const myResources = useMemo<MbscResource[]>(
() => [
{
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',
},
],
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/timeline-events/',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<>
<div ref={setDraggable1} className="event-hooks-draggable" style={{ background: '#ffdab8' }}>
<div className="draggable-title">External drag 1</div>
<div className="draggable-text">Drag me to calendar</div>
<Draggable dragData={dragData1} element={draggable1} />
</div>
<div ref={setDraggable2} className="event-hooks-draggable" style={{ background: '#ddfcf7' }}>
<div className="draggable-title">External drag 2</div>
<div className="draggable-text">Drag me to calendar</div>
<Draggable dragData={dragData2} element={draggable2} />
</div>
<div ref={setDraggable3} className="event-hooks-draggable" style={{ background: '#d19494' }}>
<div className="draggable-title">External resource</div>
<div className="draggable-text">Drag me to calendar</div>
<Draggable dragData={dragData3} element={draggable3} type="resource" />
</div>
<Eventcalendar
data={myEvents}
dragToCreate={true}
dragToMove={true}
dragToResize={true}
externalDrop={true}
externalResourceDrop={true}
view={myView}
resources={myResources}
invalid={myInvalid}
onCellClick={() => {
// Logic for cell click
}}
onCellDoubleClick={() => {
// Logic for cell double click
}}
onCellRightClick={() => {
// Logic for cell right click
}}
onCellHoverIn={() => {
// Logic for cell hover in
}}
onCellHoverOut={() => {
// Logic for cell hover out
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onEventClick={() => {
// Logic for event click
}}
onEventCreate={() => {
// Logic for event create
}}
onEventCreated={() => {
// Logic for event created
}}
onEventCreateFailed={() => {
// Logic for failed event create
}}
onEventDelete={() => {
// Logic for event delete
}}
onEventDeleted={() => {
// Logic for event deleted
}}
onEventDoubleClick={() => {
// Logic for event double click
}}
onEventDragEnter={() => {
// Logic for event drag enter
}}
onEventDragLeave={() => {
// Logic for event drag leave
}}
onEventHoverIn={() => {
// Logic for event hover in
}}
onEventHoverOut={() => {
// Logic for event hover out
}}
onEventUpdate={() => {
// Logic for event update
}}
onEventUpdated={() => {
// Logic for event updated
}}
onEventUpdateFailed={() => {
// Logic for failed event update
}}
onEventRightClick={() => {
// Logic for event right click
}}
onInit={() => {
// Logic running on component init
}}
onPageChange={() => {
// Your custom event handler goes here
}}
onPageLoaded={() => {
// Use it to inject custom markup & attach custom listeners
}}
onPageLoading={() => {
// Use it to load data on demand
}}
onResourceClick={() => {
// Logic for resource click
}}
onResourceDoubleClick={() => {
// Logic for resource double click
}}
onResourceDragEnd={() => {
/* Logic for resource drag end */
}}
onResourceDragStart={() => {
/* Logic for resource drag start */
}}
onResourceOrderUpdate={() => {
// Logic for resource update
}}
onResourceCreate={() => {
// Logic for resource create
}}
onResourceCreated={() => {
// Logic for resource created
}}
onResourceDelete={() => {
// Logic for resource delete
}}
onResourceDeleted={() => {
// Logic for resource deleted
}}
onResourceDragEnter={() => {
// Logic for resource update
}}
onResourceDragLeave={() => {
// Logic for resource update
}}
onResourceRightClick={() => {
// Logic for resource right click
}}
onResourceHoverIn={() => {
// Logic for resource hover in
}}
onResourceHoverOut={() => {
// Logic for resource hover out
}}
onSelectedDateChange={() => {
// Use it to keep track of the selected date externally
}}
/>
</>
);
};
export default App;
.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;
}