(
() => ({
scheduler: {
type: 'week',
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '18:00',
timeCellStep: 20,
timeLabelStep: 20,
allDay: false,
},
}),
[],
);
const customScheduleEventContent = useCallback((event: MbscCalendarEventData) => {
if (!event.original!.type) {
return Patient: {event.title === 'New event' ? 'John Doe' : event.title}
;
}
return null;
}, []);
const customResource = useCallback(
(resource: MbscResource) => (
<>
{resource.cssClass === 'mds-healthcare-res-col' && (
{resource.name}
{resource.description}
)}
),
[],
);
const showToast = useCallback((message: string) => {
setToastText(message);
setToastOpen(true);
}, []);
const handleEventCreated = useCallback(() => {
showToast('Appointment created');
}, [showToast]);
const handleEventUpdated = useCallback(() => {
showToast('Appointment updated');
}, [showToast]);
const handleEventDeleted = useCallback(() => {
showToast('Appointment deleted');
}, [showToast]);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
return (
<>
);
};
export default App;
```
### CSS
```css
.mds-healthcare .mbsc-schedule-time-col,
.mds-healthcare .mbsc-schedule-time-wrapper {
width: 80px;
}
.mds-healthcare .mbsc-schedule-resource-title {
padding: 0;
}
.mds-healthcare-res-col {
width: 210px;
border: 0 !important;
}
/* Availability column */
.mds-healthcare-res-col-bar {
width: 14px;
}
.mds-healthcare-res-col-bar .mbsc-schedule-event {
margin-left: 5px;
}
.mds-healthcare-res-col-bar .mbsc-schedule-event-range {
display: none;
}
.mds-healthcare-res-col-bar .mbsc-schedule-event-bar {
width: 4px;
border-radius: 3px;
}
/* Resource header */
.mds-healthcare-res-cont {
padding: 10px;
font-weight: 500;
text-align: start;
}
.mds-healthcare-res-name {
font-size: 16px;
font-weight: 600;
line-height: 20px;
}
.mds-healthcare-res-desc {
font-size: 12px;
line-height: 14px;
margin-top: 4px;
}
.mds-healthcare-res-avatar {
height: 40px;
width: 40px;
margin: 10px 0;
}
```
## Implementation notes
- Use `type: 'week'` with `startDay: 1`, `endDay: 5`, `startTime: '08:00'`, `endTime: '18:00'`, `timeCellStep: 20`, `timeLabelStep: 20`, and `allDay: false`. Set `groupBy: 'date'` so all doctor columns appear side by side under each day heading.
- Define resources in interleaved pairs for each doctor: a narrow "bar" resource (even ID, `cssClass: 'mds-healthcare-res-col-bar'`) immediately followed by the doctor resource (odd ID, `name`, `img`, `description`, `color`, `cssClass: 'mds-healthcare-res-col'`). Bar resources 4, 6, 8, 10, 12 also carry `eventCreation: false`; bar resource 2 does not. The bar column renders as a narrow green availability track to the left of the doctor's appointment column.
- Add a `type: 'availability'` event for each bar resource covering the doctor's working hours (`start`/`end`), with `recurring: { repeat: 'daily' }` and `editable: false`. The bar events serve purely as a visual availability indicator - their content is suppressed via `renderSchedulerEventContent`.
- Define `invalid` entries per doctor pair: apply two recurring `invalid` entries to both the bar and doctor resource IDs - one covering `'00:00'` to the working-hours start and one from the working-hours end to `'24:00'`, each with `recurring: { repeat: 'daily' }`. This greys out off-hours on both the bar and appointment columns simultaneously.
- Use `renderSchedulerEventContent` (Vue: `#schedulerEventContent` slot; Angular: `[schedulerEventContentTemplate]`) to render event content: return a "Patient: name" label for regular appointment events (check `!event.original.type`), and an empty/null value for availability bar events to hide their content entirely.
- Use `renderResource` (Vue: `#resource` slot; Angular: `[resourceTemplate]`) to differentiate the two column types: for doctor columns (`cssClass === 'mds-healthcare-res-col'`), render an avatar image alongside the doctor's name and description; for bar columns, render an empty fragment.
- Set `eventOverlap: false` and `dragTimeStep: 20`. Drag creation, move, and resize are left commented out in the demo.
- In `onEventCreated`, `onEventUpdated`, and `onEventDeleted`, show a `Toast` with a short status message.
## 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: [Appointment Scheduling](https://demo.mobiscroll.com/react/scheduler/doctors-appointment.md) - Build a React appointment scheduler — assign doctors or dentists, drag from an unscheduled queue, and prevent double-booking.
- Next: [24-Hour Rotating Crew Shift Rota](https://demo.mobiscroll.com/react/scheduler/24-hour-manufacturing-shift-rota-planning.md) - Build a 24-hour rotating crew rota with the React Scheduler — three crews, three shifts, and automatic conflict resolution when shifts move.