--- title: "React Scheduler Group by Resource or Date Example | Mobiscroll" component: "Scheduler" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/scheduler/group-by-resource-by-day" --- # Group by Resource or Date - React Scheduler demo Show resources as the primary group in a React Scheduler and toggle between resource and date grouping using the built-in segmented control. For React and Next.JS. - [Live demo](https://demo.mobiscroll.com/react/scheduler/group-by-resource-by-day) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/scheduler/group-by-resource-by-day) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/scheduler/group-by-resource-by-day) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/group-by-resource-by-day.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/group-by-resource-by-day.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/group-by-resource-by-day.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/group-by-resource-by-day.md) ## Description 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`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-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.](https://demo.mobiscroll.com/react/scheduler/switching-calendar-scheduler-agenda) ## What this demo shows - A desktop weekly scheduler from Monday to Friday, with a fixed resource and week strip, and a vertically scrollable time grid running from 8 AM to 5 PM. - **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day. - **Time grid** The scheduler displays a 9-hour range from 8 AM to 5 PM and supports vertical scrolling. - **Group by controls** A configuration panel lets users switch between grouping by `Date` and grouping by `Resource`. - **Resource grouping** With `Resource` selected by default, each resource gets its own week view in the scheduler grid. - **Date grouping** Selecting `Date` updates the layout so resources are displayed under each date. - **View controls** A configuration panel lets users switch between `Day` and `Week`, with the weekly scheduler selected by default. - **Daily scheduler** Selecting `Day` updates the scheduler to show a daily scheduler layout. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **Current time** A blue current-time line appears across the time grid. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Employee scheduling and availability management** Display employee schedules, availability across multiple people in a weekly calendar view. - **Resource and shift planning** Organize shifts, assignments, and workload distribution while keeping meetings, tasks, and absences visible. - **Team operations and project coordination** Track recurring meetings, deadlines, field activities, and employee commitments alongside time-off information. ## Tutorial ### Group by - ( ) Date - (x) Resource ### Calendar view - ( ) Day - (x) Week ```jsx const myResources = [{ id: 1, name: 'Ryan', color: '#f7c4b4' }, { id: 2, name: 'Kate', color: '#c6f1c9' }, { id: 3, name: 'John', color: '#e8d0ef' }]; ``` With "Date": ```jsx const myResources = [{ id: 1, name: 'Ryan', color: '#f7c4b4' }, { id: 2, name: 'Kate', color: '#c6f1c9' }, { id: 3, name: 'John', color: '#e8d0ef' }]; ``` With "Day": ```jsx const myResources = [{ id: 1, name: 'Ryan', color: '#f7c4b4' }, { id: 2, name: 'Kate', color: '#c6f1c9' }, { id: 3, name: 'John', color: '#e8d0ef' }]; ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option - [`clickToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option - [`eventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-eventDelete) - option - [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option - [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option ## Code ### JSX ```jsx import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react'; import { useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light', }); 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 ( ); } export default App; ``` ### TSX ```tsx import { Eventcalendar, getJson, MbscCalendarEvent, MbscEventcalendarView, MbscResource, setOptions, } from '@mobiscroll/react'; import { FC, useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light', }); const App: FC = () => { 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: MbscCalendarEvent[]) => { setEvents(events); }, 'jsonp', ); }, []); return ( ); }; export default App; ``` ## Implementation notes - Use `view: { scheduler: { type: 'week', allDay: false, startDay: 1, endDay: 5, startTime: '08:00', endTime: '17:00' } }` - Mon-Fri, 8am-5pm, no all-day row. - Define 3 resources, each with `id`, `name`, and `color`: Ryan, Kate, John. - Load events via `getJson` from a JSONP endpoint on mount. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. JS/jQuery (imperative API): call `inst.setEvents(events)`. - No explicit `groupBy` is set - the default scheduler layout renders resources as separate columns within each day. ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-react.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config react ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` npm run dev ``` On a trial, add `--trial` to the config command: `mobiscroll config react --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation ## Related demos - Previous: [Multi-Resource View](https://demo.mobiscroll.com/react/scheduler/resource-view.md) - Show multiple resources — people, rooms, or equipment — side by side in a React Scheduler weekly view. - Next: [Multi-Resource Shared Events](https://demo.mobiscroll.com/react/scheduler/shared-events-across-resources.md) - Schedule event across multiple resources in the React Scheduler — for shared work calendars, mixed resource types like instructor and aircraft.