Basic Usage
Use the <mobiscroll.Eventcalendar /> component and pass all the necessary options as props, like theme="ios".
The events can be passed in a couple of different ways. In this example we are loading them through an external API.
Interested to learn about the calendar view? Learn how to set up the range the agenda covers →
Demo
jsxconst view = React.useMemo(() => {
return {
agenda: { type: 'month' }
};
}, []);
const [myEvents, setEvents] = React.useState([]);
React.useEffect(() => {
getJson('//trial.mobiscroll.com/events/?vers=5', (events) => {
setEvents(events);
}, 'jsonp');
}, []);
<Eventcalendar
view={view}
theme="
JSXTSX
import { Eventcalendar, getJson, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const [isToastOpen, setToastOpen] = useState(false);
const [toastMessage, setToastMessage] = useState();
const myView = useMemo(() => ({ agenda: { type: 'month' } }), []);
const handleEventClick = useCallback((args) => {
setToastMessage(args.event.title);
setToastOpen(true);
}, []);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<>
<Eventcalendar data={myEvents} view={myView} onEventClick={handleEventClick} />
<Toast message={toastMessage} isOpen={isToastOpen} onClose={handleCloseToast} />
</>
);
}
export default App;
import {
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscEventClickEvent,
setOptions,
Toast,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const [isToastOpen, setToastOpen] = useState<boolean>(false);
const [toastMessage, setToastMessage] = useState<string>();
const myView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'month' } }), []);
const handleEventClick = useCallback((args: MbscEventClickEvent) => {
setToastMessage(args.event.title);
setToastOpen(true);
}, []);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<>
<Eventcalendar data={myEvents} view={myView} onEventClick={handleEventClick} />
<Toast message={toastMessage} isOpen={isToastOpen} onClose={handleCloseToast} />
</>
);
};
export default App;