);
const isDouble = useCallback((event: MbscCalendarEvent, inst: Eventcalendar) => {
const date = new Date(event.start as string).setHours(0);
const events = inst.getEvents(new Date(date));
const ev = events.find(
(e) => new Date(e.start as string).setHours(0) === date && e.resource === event.resource && e.slot === event.slot,
);
return ev;
}, []);
const handleCreateEvent = useCallback(
(args: MbscEventCreateEvent, inst: Eventcalendar) => {
if (isDouble(args.event, inst)) {
return false;
} else {
setTimeout(() => {
setShifts([...shifts, args.event]);
});
}
},
[shifts, isDouble],
);
const handleEventUpdate = useCallback(
(args: MbscEventUpdateEvent, inst: Eventcalendar) => {
const event = args.event;
if (isDouble(event, inst)) {
return false;
} else {
const newName = getEmployeeName(event);
if (newName) {
const index = shifts.findIndex((x) => x.id === event.id);
const newShifts = [...shifts];
newShifts[index].title = newName;
setShifts(newShifts);
}
}
},
[shifts, getEmployeeName, isDouble],
);
const handleDeleteEvent = useCallback(
(args: MbscEventDeletedEvent) => {
setShifts(shifts.filter((item) => item.id !== args.event.id));
},
[shifts],
);
return (
);
}
export default App;
```
### CSS
```css
.md-shift-management-calendar .mbsc-schedule-event {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
}
.md-shift-management-calendar .mbsc-timeline-slots {
height: 94px;
}
.md-shift-management-calendar .mbsc-timeline-header-placeholder {
height: 120px;
}
.md-shift-management-calendar .mbsc-timeline-resource {
display: flex;
align-items: center;
}
.md-shift-management-calendar .mbsc-timeline-slot {
width: 200px;
}
.md-shift-management-calendar .mbsc-timeline-parent {
height: 40px;
}
.md-shift-management-calendar .mbsc-checkbox {
padding: 18px 0 18px 45px;
}
.md-shift-management-calendar .mbsc-textfield-wrapper {
margin: 12px 12px 12px 28px;
}
.md-shift-management-calendar .mbsc-select.mbsc-textfield {
height: 32px;
width: 120px;
}
.md-shift-management-calendar .mbsc-icon.mbsc-select-icon {
width: 20px;
height: 20px;
top: 7px;
}
.md-shift-resource {
font-size: 18px;
}
.md-shift-resource-icon {
margin-right: 10px;
}
.md-shift-header {
margin: 3px 6px;
display: flex;
flex-direction: column;
}
.md-shift-name {
font-size: 15px;
}
.md-shift-time {
opacity: 0.5;
font-size: 12px;
margin-left: 5px;
}
.md-shift-count {
margin-top: 6px;
margin-right: 12px;
display: inline-block;
width: 26px;
height: 20px;
}
.md-shift-icon {
padding-right: 3px;
}
```
## Implementation notes
- Use the timeline view in summary mode with `eventDisplay: 'fill'`. For the week view, set `startDay: 1` and `endDay: 5` to show only working days; support switching to `type: 'day'` via a `Select` control in the header.
- Define the named shift buckets with the `slots` option. Each slot object needs an `id`, a `name`, and a custom `time` string (e.g. `"8AM – 12PM"`) for display. Each event references its slot via the `slot` field.
- Structure resources as a two-level tree: role groups (Barista, Bartenders, Chefs, etc.) at the top level with individual employee leaf nodes beneath them. Set `eventCreation: false` on every group node so shifts are only created on employee rows. Give each employee a `color` property that Mobiscroll automatically applies to their events.
- Use `renderResource` (Angular: `resourceTemplate`, Vue: `#resource` slot) to differentiate group and leaf rows - show the role icon and a colored label for group nodes, and just the employee name for leaf nodes.
- Use `renderSlot` (Angular: `slotTemplate`, Vue: `#slot` slot) to render a custom slot column header showing the slot name and time range, followed by a live occupancy count per role category (icon + number of assigned employees) for that slot and date. Show an "empty..." fallback when no shifts are assigned.
- Calculate occupancy counts by iterating over the current events array and counting how many employees per role category have a shift matching the given slot ID and date string.
- Use `renderHeader` (Angular: `headerTemplate`, Vue: `#header` slot) to render a custom toolbar combining `CalendarNav`/`CalendarPrev`/`CalendarToday`/`CalendarNext` navigation controls with `Checkbox` components for toggling each slot's visibility and a `Select` for switching between day and week views.
- Toggle slot visibility by maintaining a filtered `slots` array in state: uncheck a checkbox to remove the slot, check it to add it back. When only one slot remains checked, disable its checkbox so at least one slot is always visible.
- Enable `clickToCreate` so users can sign an employee up for a shift by clicking an empty cell. Set `dragToMove: true` to allow repositioning shifts by dragging.
- Use `extendDefaultEvent` to pre-populate the newly created event's `title` with the employee's first name, looked up from the resource data using the event's `resource` ID.
- Use `onEventCreate` to validate new shifts before saving: call `inst.getEvents()` to check whether the same resource already has a shift in the same slot on the same day, and return `false` to cancel the creation if a duplicate is found.
- Use `onEventUpdate` to apply the same duplicate check after a drag; also update the event `title` when the resource changes so it reflects the new employee's name. Return `false` to revert if the target cell is already occupied.
- Use `onEventDeleted` to remove the deleted shift from the events array in state.
## 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: [Timezone Meeting Planner](https://demo.mobiscroll.com/react/timeline/timezone-meeting-planner.md) - Plan team meetings across multiple time zones using the React Timeline — show availability, time-off blocks, with events in local time.
- Next: [Meal Planner](https://demo.mobiscroll.com/react/timeline/meal-planner.md) - Build a weekly meal planner with the React Timeline — meal types as color-coded resource rows, custom add/edit popover for creating or updating meals.