Lazy Load Events 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.
Lazy Load Events on Scroll
The scheduler 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 count since not all data is loaded in memory from start.
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: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const [isToastOpen, setToastOpen] = useState(false);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
const myView = useMemo(
() => ({
scheduler: {
type: 'month',
timeCellStep: 15,
timeLabelStep: 15,
},
}),
[],
);
const myResources = useMemo(
() => [
{ id: 1, name: 'Resource 1', color: '#FF5733' },
{ id: 2, name: 'Resource 2', color: '#33FF57' },
{ id: 3, name: 'Resource 3', color: '#3357FF' },
{ id: 4, name: 'Resource 4', color: '#FF33A6' },
{ id: 5, name: 'Resource 5', color: '#FFC300' },
{ id: 6, name: 'Resource 6', color: '#DAF7A6' },
{ id: 7, name: 'Resource 7', color: '#581845' },
{ id: 8, name: 'Resource 8', color: '#900C3F' },
{ id: 9, name: 'Resource 9', color: '#C70039' },
{ id: 10, name: 'Resource 10', color: '#FF5733' },
{ id: 11, name: 'Resource 11', color: '#33FFBD' },
{ id: 12, name: 'Resource 12', color: '#FFC300' },
{ id: 13, name: 'Resource 13', color: '#FF33F6' },
{ id: 14, name: 'Resource 14', color: '#33FF57' },
{ id: 15, name: 'Resource 15', color: '#33A6FF' },
{ id: 16, name: 'Resource 16', color: '#DAF7A6' },
{ id: 17, name: 'Resource 17', color: '#581845' },
{ id: 18, name: 'Resource 18', color: '#900C3F' },
{ id: 19, name: 'Resource 19', color: '#C70039' },
{ id: 20, name: 'Resource 20', color: '#FF33F6' },
],
[],
);
const handleVirtualLoading = useCallback((args) => {
const start = formatDate('YYYY-MM-DDTHH:mm:ss', args.viewStart);
const end = formatDate('YYYY-MM-DDTHH:mm:ss', args.viewEnd);
getJson(
'https://trial.mobiscroll.com/load-data-scroll/?start=' +
start +
'&end=' +
end +
'&rstart=' +
args.resourceStart +
'&rend=' +
args.resourceEnd,
(data) => {
setEvents(data.events);
setToastOpen(true);
},
'jsonp',
);
}, []);
return (
<>
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
view={myView}
data={myEvents}
resources={myResources}
groupBy="date"
onVirtualLoading={handleVirtualLoading}
/>
<Toast message="Loading events..." 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 App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const [isToastOpen, setToastOpen] = useState(false);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
const myView = useMemo<MbscEventcalendarView>(
() => ({
scheduler: {
type: 'month',
timeCellStep: 15,
timeLabelStep: 15,
},
}),
[],
);
const myResources: MbscResource[] = useMemo(
() => [
{ id: 1, name: 'Resource 1', color: '#FF5733' },
{ id: 2, name: 'Resource 2', color: '#33FF57' },
{ id: 3, name: 'Resource 3', color: '#3357FF' },
{ id: 4, name: 'Resource 4', color: '#FF33A6' },
{ id: 5, name: 'Resource 5', color: '#FFC300' },
{ id: 6, name: 'Resource 6', color: '#DAF7A6' },
{ id: 7, name: 'Resource 7', color: '#581845' },
{ id: 8, name: 'Resource 8', color: '#900C3F' },
{ id: 9, name: 'Resource 9', color: '#C70039' },
{ id: 10, name: 'Resource 10', color: '#FF5733' },
{ id: 11, name: 'Resource 11', color: '#33FFBD' },
{ id: 12, name: 'Resource 12', color: '#FFC300' },
{ id: 13, name: 'Resource 13', color: '#FF33F6' },
{ id: 14, name: 'Resource 14', color: '#33FF57' },
{ id: 15, name: 'Resource 15', color: '#33A6FF' },
{ id: 16, name: 'Resource 16', color: '#DAF7A6' },
{ id: 17, name: 'Resource 17', color: '#581845' },
{ id: 18, name: 'Resource 18', color: '#900C3F' },
{ id: 19, name: 'Resource 19', color: '#C70039' },
{ id: 20, name: 'Resource 20', color: '#FF33F6' },
],
[],
);
const handleVirtualLoading = useCallback((args: MbscVirtualLoadEvent) => {
const start = formatDate('YYYY-MM-DDTHH:mm:ss', args.viewStart);
const end = formatDate('YYYY-MM-DDTHH:mm:ss', args.viewEnd);
getJson(
'https://trial.mobiscroll.com/load-data-scroll/?start=' +
start +
'&end=' +
end +
'&rstart=' +
args.resourceStart +
'&rend=' +
args.resourceEnd,
(data) => {
setEvents(data.events);
setToastOpen(true);
},
'jsonp',
);
}, []);
return (
<>
<Eventcalendar view={myView} data={myEvents} resources={myResources} groupBy="date" onVirtualLoading={handleVirtualLoading} />
<Toast message="Loading events..." duration={1000} isOpen={isToastOpen} onClose={handleToastClose} />
</>
);
};
export default App;
/* code */