Work Week
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.
Work Week
Customize the scheduler by not only disabling certain hours but hide them through setting the startTime and endTime properties of the view.schedule option. Quikcly set up a work calendar that goes from Monday through Friday with the startDay and endDay properties and renders the schedule from 8AM to 6PM.
You can easily add breaks - like a "Lunch break" - or disable times with the invalid option.
Demo
Code
View code on GitHub
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 [toastText, setToastText] = useState();
const myInvalids = useMemo(
() => [
{
start: '12:00',
end: '13:00',
title: 'Lunch break',
type: 'lunch',
recurring: {
repeat: 'weekly',
weekDays: 'MO,TU,WE,TH,FR',
},
},
],
[],
);
const myView = useMemo(
() => ({
scheduler: {
type: 'week',
startDay: 1,
endDay: 5,
startTime: '09:00',
endTime: '18:00',
},
}),
[],
);
const handleEventCreateFailed = useCallback((args) => {
if (args.invalid.type === 'lunch') {
setToastText("Can't create this task on lunch break.");
setToastOpen(true);
}
}, []);
const handleEventUpdateFailed = useCallback((args) => {
if (args.invalid.type === 'lunch') {
setToastText("Can't schedule this task on lunch break.");
setToastOpen(true);
}
}, []);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com//workday-events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<div>
<Eventcalendar
dragToCreate={true}
dragToMove={true}
invalid={myInvalids}
data={myEvents}
view={myView}
onEventCreateFailed={handleEventCreateFailed}
onEventUpdateFailed={handleEventUpdateFailed}
/>
<Toast message={toastText} isOpen={isToastOpen} onClose={handleCloseToast} />
</div>
);
}
export default App;
import {
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscEventCreateFailedEvent,
MbscEventUpdateFailedEvent,
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 [toastText, setToastText] = useState<string>();
const myInvalids = useMemo(
() => [
{
start: '12:00',
end: '13:00',
title: 'Lunch break',
type: 'lunch',
recurring: {
repeat: 'weekly',
weekDays: 'MO,TU,WE,TH,FR',
},
},
],
[],
);
const myView = useMemo<MbscEventcalendarView>(
() => ({
scheduler: {
type: 'week',
startDay: 1,
endDay: 5,
startTime: '09:00',
endTime: '18:00',
},
}),
[],
);
const handleEventCreateFailed = useCallback((event: MbscEventCreateFailedEvent) => {
if (event.invalid.type === 'lunch') {
setToastText("Can't create this task on lunch break.");
setToastOpen(true);
}
}, []);
const handleEventUpdateFailed = useCallback((event: MbscEventUpdateFailedEvent) => {
if (event.invalid.type === 'lunch') {
setToastText("Can't schedule this task on lunch break.");
setToastOpen(true);
}
}, []);
const handleCloseToast = useCallback(() => {
setToastOpen(false);
}, []);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com//workday-events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<div>
<Eventcalendar
dragToCreate={true}
dragToMove={true}
invalid={myInvalids}
data={myEvents}
view={myView}
onEventCreateFailed={handleEventCreateFailed}
onEventUpdateFailed={handleEventUpdateFailed}
/>
<Toast message={toastText} isOpen={isToastOpen} onClose={handleCloseToast} />
</div>
);
};
export default App;