Group by Resource or Date
Resources show up in the header of the calendar as the primary group and below them are the days. This can be switched up through the groupBy option that expects 'resource' or 'day'.
Combined with the day and week-view you can help people quickly find what they are looking for. Learn how to add an integrated segmented control to the header.
Demo
Group by
Calendar view
const myResources = [{
id: 1,
name: 'Ryan',
color: '#f7c4b4'
}, {
id: 2,
name: 'Kate',
color: '#c6f1c9'
}, {
id: 3,
name: 'John',
color: '#e8d0ef'
}];
<Eventcalendar
view={{
scheduler: { type: 'week ' }
}}
groupBy="resource "
resources={myResources}
/>
JSXTSX
import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
theme: ' ',
themeVariant: ' ',
locale:
});
function App() {
const [myEvents, setEvents] = useState([]);
const myView = useMemo(
() => ({
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '17:00',
},
}),
[],
);
const myResources = useMemo(
() => [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4',
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9',
},
{
id: 3,
name: 'John',
color: '#e8d0ef',
},
],
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/resource-events/',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
view={myView}
data={myEvents}
resources={myResources}
/>
);
}
export default App;
import {
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
setOptions ,
} from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
theme: ' ',
themeVariant: ' ',
locale:
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const myView = useMemo<MbscEventcalendarView>(
() => ({
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '17:00',
},
}),
[],
);
const myResources = useMemo<MbscResource[]>(
() => [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4',
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9',
},
{
id: 3,
name: 'John',
color: '#e8d0ef',
},
],
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/resource-events/',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Eventcalendar
clickToCreate={ }
dragToCreate={ }
dragToMove={ }
dragToResize={ }
eventDelete={ }
view={myView}
data={myEvents}
resources={myResources}
/>
);
};
export default App;