Load Resources on Scroll
Usage
theme="ios" You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant="light" You can turn auto dark mode on based on system settings.
Usage
clickToCreate={true}
// click to create is on dragToCreate={true}
// drag to create is on dragToMove={true}
// reordering is on dragToResize={true}
// resizing is on eventDelete={true}
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale={localeEn} Selecting the locale loads the localized settings and the translated UI text.
Load Resources on Scroll
The timeline view is virtualized which means that the markup is being generated and maintained on the fly. Navigating both vertically and horizontally through scrolling fires the onVirtualLoading lifecycle event which can be used to load the data on scroll rather than load everything on initial page rendering.
This dramatically improves performance in case of a large event and resource count since not all data is loaded in memory from start.
Looking to load events on scroll? Check out this example →
Demo
Code
View code on GitHub
import { Eventcalendar, formatDate, getJson, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myRes = [
{ id: 1, name: 'Resource 1' },
{ id: 2, name: 'Resource 2' },
{ id: 3, name: 'Resource 3' },
{ id: 4, name: 'Resource 4' },
{ id: 5, name: 'Resource 5' },
{ id: 6, name: 'Resource 6' },
{ id: 7, name: 'Resource 7' },
{ id: 8, name: 'Resource 8' },
{ id: 9, name: 'Resource 9' },
{ id: 10, name: 'Resource 10' },
{ id: 11, name: 'Resource 11' },
{ id: 12, name: 'Resource 12' },
{ id: 13, name: 'Resource 13' },
{ id: 14, name: 'Resource 14' },
{ id: 15, name: 'Resource 15' },
{ id: 16, name: 'Resource 16' },
{ id: 17, name: 'Resource 17' },
{ id: 18, name: 'Resource 18' },
{ id: 19, name: 'Resource 19' },
{ id: 20, name: 'Resource 20' },
{ id: 21, name: 'Resource 21' },
{ id: 22, name: 'Resource 22' },
{ id: 23, name: 'Resource 23' },
{ id: 24, name: 'Resource 24' },
{ id: 25, name: 'Resource 25' },
];
function App() {
const [myEvents, setEvents] = useState([]);
const [myResources, setResources] = useState(myRes);
const [isToastOpen, setToastOpen] = useState(false);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
const myView = useMemo(
() => ({
timeline: {
type: 'month',
resolutionHorizontal: 'hour',
},
}),
[],
);
const handleVirtualLoading = useCallback(
(args) => {
const start = formatDate('YYYY-MM-DD', args.viewStart);
const end = formatDate('YYYY-MM-DD', args.viewEnd);
const isEndLoaded = myResources[myResources.length - 1].id > args.resourceEnd;
if (!isEndLoaded) {
setToastOpen(true);
}
getJson(
'https://trial.mobiscroll.com/load-data-scroll/?start=' +
start +
'&end=' +
end +
'&rstart=' +
args.resourceStart +
'&rend=' +
args.resourceEnd +
'&load=' +
(!isEndLoaded ? args.resourceEnd : 0),
(data) => {
if (data.resources) {
setResources([...myResources, ...data.resources]);
}
setEvents(data.events);
},
'jsonp',
);
},
[myResources],
);
return (
<>
<Eventcalendar view={myView} data={myEvents} resources={myResources} onVirtualLoading={handleVirtualLoading} />
<Toast message="Loading Resources..." duration={1000} isOpen={isToastOpen} onClose={handleToastClose} />
</>
);
}
export default App;
import {
Eventcalendar,
formatDate,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
MbscVirtualLoadEvent,
setOptions,
Toast ,
} from '@mobiscroll/react';
import { FC, useCallback, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myRes = [
{ id: 1, name: 'Resource 1' },
{ id: 2, name: 'Resource 2' },
{ id: 3, name: 'Resource 3' },
{ id: 4, name: 'Resource 4' },
{ id: 5, name: 'Resource 5' },
{ id: 6, name: 'Resource 6' },
{ id: 7, name: 'Resource 7' },
{ id: 8, name: 'Resource 8' },
{ id: 9, name: 'Resource 9' },
{ id: 10, name: 'Resource 10' },
{ id: 11, name: 'Resource 11' },
{ id: 12, name: 'Resource 12' },
{ id: 13, name: 'Resource 13' },
{ id: 14, name: 'Resource 14' },
{ id: 15, name: 'Resource 15' },
{ id: 16, name: 'Resource 16' },
{ id: 17, name: 'Resource 17' },
{ id: 18, name: 'Resource 18' },
{ id: 19, name: 'Resource 19' },
{ id: 20, name: 'Resource 20' },
{ id: 21, name: 'Resource 21' },
{ id: 22, name: 'Resource 22' },
{ id: 23, name: 'Resource 23' },
{ id: 24, name: 'Resource 24' },
{ id: 25, name: 'Resource 25' },
];
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const [myResources, setResources] = useState<MbscResource[]>(myRes);
const [isToastOpen, setToastOpen] = useState(false);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
const myView = useMemo<MbscEventcalendarView>(
() => ({
timeline: {
type: 'month',
resolutionHorizontal: 'hour',
},
}),
[],
);
const handleVirtualLoading = useCallback(
(args: MbscVirtualLoadEvent) => {
const start = formatDate('YYYY-MM-DD', args.viewStart);
const end = formatDate('YYYY-MM-DD', args.viewEnd);
const isEndLoaded = myResources[myResources.length - 1].id > args.resourceEnd;
if (!isEndLoaded) {
setToastOpen(true);
}
getJson(
'https://trial.mobiscroll.com/load-data-scroll/?start=' +
start +
'&end=' +
end +
'&rstart=' +
args.resourceStart +
'&rend=' +
args.resourceEnd +
'&load=' +
(!isEndLoaded ? args.resourceEnd : 0),
(data) => {
if (data.resources) {
setResources([...myResources, ...data.resources]);
}
setEvents(data.events);
},
'jsonp',
);
},
[myResources],
);
return (
<>
<Eventcalendar view={myView} data={myEvents} resources={myResources} onVirtualLoading={handleVirtualLoading} />
<Toast message="Loading Resources..." duration={1000} isOpen={isToastOpen} onClose={handleToastClose} />
</>
);
};
export default App;