Responsive Behaviour
The scheduler is fully responsive, it adapts to the available space and fills the screen to look good everywhere.
Use the responsive option to configure how the scheduler behaves on different sized screens. You can set it up as a daily schedule view on small screens and a weekly schedule on bigger screens.
The responsive option is equipped with five breakpoints - xsmall, small, medium, large, xlarge - and custom values can be added for a perfect fine-tune.
Demo
responsive: {
}
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 myResponsive = useMemo(
() => ({
xsmall: {
view: {
scheduler: { type: 'day' },
},
},
custom: {
// Custom breakpoint
breakpoint: 600,
view: {
scheduler: { type: 'week' },
},
},
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={myEvents}
responsive={myResponsive}
/>
);
}
export default App;
import {
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarOptions,
MbscResponsiveOptions,
setOptions ,
} from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const myResponsive: MbscResponsiveOptions<MbscEventcalendarOptions> = useMemo(
() => ({
xsmall: {
view: {
scheduler: { type: 'day' },
},
},
custom: {
// Custom breakpoint
breakpoint: 600,
view: {
scheduler: { type: 'week' },
},
},
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
data={myEvents}
responsive={myResponsive}
/>
);
};
export default App;