Hide All-Day Section
Hide the all-day events section of the scheduler by setting the allDay property under the view.scheduler option.
Demo
Control over the all-day section
Show all-day events
<Eventcalendar
view={{
scheduler: {
type: 'week ',
allDay: true
}
}}
/>
JSXTSX
import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const myView = useMemo(
() => ({
scheduler: {
type: 'week',
allDay: false,
},
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={myEvents}
view={myView}
/>
);
}
export default App;
import { Eventcalendar, getJson, MbscCalendarEvent, MbscEventcalendarView, setOptions } from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const myView = useMemo<MbscEventcalendarView>(
() => ({
scheduler: {
type: 'week',
allDay: false,
},
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={myEvents}
view={myView}
/>
);
};
export default App;