),
[selectedView, handleViewChange, handleBackToView],
);
const onCellClick = useCallback(
(args: MbscCellClickEvent) => {
const date = args.date;
const target = args.domEvent.target as HTMLElement;
if (target.closest('.mds-cell-template-add')) {
const year = date.getFullYear();
const month = date.getMonth();
const day = date.getDate();
const newEvent = {
title: 'New appointment',
start: new Date(year, month, day, 9),
end: new Date(year, month, day, 10),
color: '#ecee8d',
};
setEvents((prev) => [...prev, newEvent]);
setToastMessage('Appointment added to ' + formatDate('DDD D, MMM', date));
setToastOpen(true);
} else if (selectedView === 'month') {
setCalendarView('day', date);
}
},
[selectedView, setCalendarView],
);
const handleSelectedDateChange = useCallback((args: MbscSelectedDateChangeEvent) => {
setCurrentDate(args.date as Date);
}, []);
const handleToastClose = useCallback(() => {
setToastOpen(false);
}, []);
return (
<>
);
};
export default App;
```
### CSS
```css
/* Overrides */
.mds-cell-template .mbsc-calendar-week-days,
.mds-cell-template .mbsc-calendar-labels {
display: none;
}
.mds-cell-template .mbsc-calendar-cell {
min-height: 120px;
}
.mds-cell-template .mbsc-calendar-day-outer {
opacity: 0.7;
}
.mds-cell-template .mbsc-schedule-header-item {
min-height: 120px;
padding: 0;
cursor: pointer;
}
/* Custom header */
.mds-cell-template-nav {
width: 200px;
}
.mds-cell-template-view-controls {
max-width: 350px;
margin: 0 auto;
}
.mds-cell-template-view-switch .mbsc-segmented {
margin: 0;
}
.mds-cell-template-view-switch .mbsc-segmented.mbsc-material,
.mds-cell-template-view-switch .mbsc-segmented.mbsc-windows {
padding: 0;
}
.mds-cell-template-back.mbsc-button {
width: 100%;
height: 32px;
margin: 0 6px;
padding: 0 12px;
display: none;
}
.mds-cell-template-back .mbsc-button-txt {
font-size: 14px;
line-height: 32px;
}
.mds-cell-template-back .mbsc-icon {
width: 18px;
height: 18px;
line-height: 18px;
font-size: 14px;
}
/* Cell template */
.mds-cell-template-cont {
position: absolute;
inset: -1px;
overflow: hidden;
padding: 10px;
text-align: left;
line-height: 25px;
white-space: nowrap;
}
.mds-cell-template-cont:after {
content: '';
position: absolute;
inset: -1px;
pointer-events: none;
transition: background 0.15s ease-in-out;
}
.mds-cell-template-cont:hover:after {
background: rgba(51, 51, 51, 0.2);
}
.mds-cell-template-day {
font-weight: 600;
}
.mds-cell-template-info {
font-weight: 600;
font-size: 15px;
color: #555;
}
.mds-cell-template-add.mbsc-button {
position: absolute;
bottom: 5px;
right: 5px;
font-size: 10px;
display: none;
}
.mbsc-calendar-width-sm .mds-cell-template-cont {
font-size: 14px;
}
.mbsc-calendar-width-sm .mds-cell-template-info {
font-size: 12px;
}
/* Month view */
.mds-cell-template-month-view.mbsc-windows .mds-cell-template-cont {
inset: -2px -1px;
}
.mds-cell-template-month-view .mds-cell-template-add {
display: block;
}
/* Day view */
.mds-cell-template-day-view .mds-cell-template-back {
display: block;
}
.mds-cell-template-day-view .mbsc-schedule-header-item:not(.mbsc-selected),
.mds-cell-template-day-view .mds-cell-template-view-switch,
.mds-cell-template-day-view .mds-cell-template-cont:after {
display: none;
}
.mds-cell-template-day-view .mds-cell-template-cont {
text-align: center;
}
.mds-cell-template-day-view .mbsc-schedule-header-item.mbsc-selected {
border: 0;
}
```
## Implementation notes
- Start in month calendar view (`calendar: { type: 'month' }`) and support switching to week and day scheduler views (`scheduler: { type: 'week'/'day', allDay: false, startTime: '08:00', endTime: '17:00' }`) via a `SegmentedGroup` toggle in the custom header.
- Enable `clickToCreate`, `dragToCreate`, `dragToMove`, `dragToResize`, and `eventDelete` for full event management in the scheduler views. Use `extendDefaultEvent` to tag drag-created events with `type: 'appointment'` and the correct color so they are counted correctly in the cell renderer.
- Tag each event with a custom `type` property (`'meeting'` or `'appointment'`) so per-day counts can be split by category in the custom cell renderer.
- Use `renderCalendarDay` (Angular: `calendarDayTemplate`, Vue: `calendarDay`) to fully replace each calendar cell: the renderer receives `date` and `events` for that day. Count meetings vs appointments, compute a stress-level emoji and background color from total event count (0: none; 1-2: green/😃; 3-4: orange/😐; 5+: red/😫), generate and cache a random weather emoji and temperature per date, and render the day label, stress indicator, weather, meeting count, appointment count, and a plus button. Suppress the stress background color in day view.
- Use `renderHeader` (Angular: `headerTemplate`, Vue: `header`) to render the `SegmentedGroup` view toggle (Calendar / Week view), a "Back to calendar" button (visible only in day view), and the standard `CalendarNav`, `CalendarPrev`, `CalendarToday`, `CalendarNext` controls.
- In `onCellClick`, check whether the click target is the plus button: if so, create a new 09:00-10:00 event for that date and show a `Toast`; otherwise navigate to day view for the clicked date.
- Track a `previousView` state so the "Back to calendar" button returns to whichever view (month or week) the user was in before drilling into day view.
## 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: [Property Reservations](https://demo.mobiscroll.com/react/eventcalendar/property-booking-calendar.md) - Show property reservations in a monthly React booking calendar — exact check-in/check-out time labels, color-coded by platform.