);
};
export default App;
```
### CSS
```css
.md-drag-drop-bw-inst-cont .mbsc-eventcalendar {
height: 500px;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-parent {
height: 32px;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-resource {
padding-left: 5px !important;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-row-gutter {
height: 6px;
}
.md-drag-drop-bw-inst-cont .mbsc-timeline-resource-depth-step {
width: 0;
}
.md-drag-drop-bw-inst-second .mbsc-timeline-header,
.md-drag-drop-bw-inst-second .mbsc-timeline-header-sticky {
display: none;
}
.md-aircraft-code {
color: #939995;
}
.md-drag-drop-bw-inst-cont {
min-height: 500px;
height: 100%;
}
.md-drag-drop-bw-inst-first {
border-bottom: 5px solid #ccc;
}
.md-drag-drop-bw-inst-avatar {
max-height: 55px;
max-width: 55px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.md-drag-drop-bw-inst-details {
margin-left: 16px;
font-size: 12px;
}
.md-drag-drop-bw-inst-title {
font-size: 12px;
margin-top: 5px;
}
.md-drag-drop-faded {
opacity: 0.3;
}
.md-drag-drop-invalid.mbsc-schedule-invalid {
background: repeating-linear-gradient(-45deg, #f3f3f3, #f3f3f3 11px, #e5e5e5 11px, #e5e5e5 22px);
}
```
## Implementation notes
- Render two Eventcalendar instances stacked vertically: the top shows passenger bookings (one row per passenger; drag-out and delete only) and the bottom shows jet aircraft grouped by operator.
- Use `type: 'day'` with `size: 1` on both calendars so they show the same single day.
- On the top calendar, set `externalDrag: true` so bookings can be dragged out onto the bottom calendar. Set `eventDelete: true` to allow deleting bookings directly. Disable `dragToMove`, `dragToCreate`, and `dragToResize`.
- On the bottom calendar, set `externalDrop: true` to accept dropped bookings, `dragToMove: true` to allow reassignment, `dragInTime: false` to prevent time changes, and `eventDelete: true`. Disable `dragToCreate` and `dragToResize`. Set `eventOverlap: false` to prevent double-booking a jet.
- Set `showControls: false` on the bottom calendar so only the top calendar shows the navigation header. Bind `selectedDate` on the bottom calendar and update it via `onPageLoading` on the top calendar to keep both on the same date. Wire `onSelectedDateChange` on the bottom calendar to propagate manual navigation back.
- Synchronize horizontal scrolling: in `onPageLoaded` for each calendar, locate the `.mbsc-timeline-grid-scroll` scroll container and attach a scroll listener. Each listener copies `scrollLeft` to the other container. Use two boolean skip-flags to prevent infinite scroll loops. Remove the listeners in `onDestroy`.
- Define the bottom calendar's resources as a two-level tree: operator groups with `eventCreation: false` and individual jet leaf nodes with custom `img`, `code`, and `crew` properties.
- Use `renderResource` (Angular: `resourceTemplate`, Vue: `#resource` slot) on the bottom calendar to show a jet photo, name, tail code, and crew count for leaf nodes, and just the operator name for group nodes.
- Use `onEventDragStart` on the bottom calendar to compute availability: find all scheduled flights that overlap the dragged booking's time window, collect their jet resource IDs, and set them as `invalid` with `recurring: { repeat: 'daily' }`. Also apply a fade CSS class to the overlapping flights to visually grey them out.
- Use `onEventDragEnd` to clear the `invalid` array and remove the fade class from all flights.
- Use `onEventCreated` and `onEventDeleted` to update the scheduled flights state. Use `onEventCreateFailed` and `onEventUpdateFailed` to show a `Toast` when a booking cannot be placed due to a conflict.
## 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: [Task Checklist in Events](https://demo.mobiscroll.com/react/timeline/check-list-tasks-within-events.md) - Render a task checklist inside each React Timeline event card — row heights expand as the list grows, and a popup let users add new subtasks.
- Next: [Task Progress Tracking](https://demo.mobiscroll.com/react/timeline/show-task-progress-on-event.md) - Show task completion progress on the React Timeline events with an inline hover slider for live updates and a progress field in the add/edit dialog.