---
title: "Angular Timeline Drag People onto Events Example | Mobiscroll"
component: "Timeline"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/timeline/drop-assignee-on-event-from-list"
---

# Drag People onto Events - Angular Timeline demo

Build a team assignment interface on the Angular Timeline — drag people from an external list onto meetings with conflict validation.

- [Live demo](https://demo.mobiscroll.com/angular/timeline/drop-assignee-on-event-from-list)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/drop-assignee-on-event-from-list)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/timeline/drop-assignee-on-event-from-list.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/drop-assignee-on-event-from-list.md), [React](https://demo.mobiscroll.com/react/timeline/drop-assignee-on-event-from-list.md), [Vue](https://demo.mobiscroll.com/vue/timeline/drop-assignee-on-event-from-list.md)

## Description

Assigning people to meetings that are already booked across multiple rooms is a common scheduling challenge. Instead of dropping external items onto the calendar grid to create new events, the goal here is to drop them onto existing events, turning each meeting into an individual drop target where attendees can be assigned directly.

This is where the [`dropcontainer`](https://mobiscroll.com/docs/angular/eventcalendar/drag-and-drop#dropcontainer) comes in. Each event rendered through the [`timelineEventTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-timelineEventTemplate) function is initialized as a drop container, turning every meeting card into a valid drop zone. The external list of team members is set up using the draggable component, so each person can be grabbed and dropped onto any event on the timeline. The [`onItemDrop`](https://mobiscroll.com/docs/angular/eventcalendar/drag-and-drop#event-onItemDrop) event handles the assignment, while [`onItemDragEnter`](https://mobiscroll.com/docs/angular/eventcalendar/drag-and-drop#event-onItemDragEnter) and [`onItemDragLeave`](https://mobiscroll.com/docs/angular/eventcalendar/drag-and-drop#event-onItemDragLeave) provide real-time visual feedback.

Beyond simple assignment, the demo includes practical validation. Before accepting a drop, it checks whether the person is already assigned to the target meeting and whether they have a time conflict with another meeting in the same slot. Assignments can also be removed by clicking on an attendee chip, with an undo option.

**Looking for dropping external items onto the calendar grid instead?** [Check out the external drag & drop example →](https://demo.mobiscroll.com/angular/timeline/external-drag-drop-sortable-dragula)

## What this demo shows

- A weekly timeline view shows multiple resources in horizontal lanes, with meetings displayed directly on the timeline for each resource.
- **Timeline header** The top area includes the timeline date header, an hourly scale beneath it. The default navigation controls are above that with a month picker, previous and next arrows, and a Today button.
- **Resource timeline** The main timeline area scrolls horizontally and shows timed events positioned within their matching resource rows.
- **Event cards** Each event uses a gray card with a colored vertical stripe and attendee chips that show the initials of assigned people.
- **Team member list** A separate list of people appears beside the timeline, with each item showing initials, name, and a secondary line that indicates either no assignment or the number of meetings they are currently assigned to.
- **Drag feedback** Team members can be dragged from the list onto existing meetings. While dragging, events show dashed outlines and a placeholder message that says `Drop people to assign`, and a drag preview follows the pointer.
- **Drop validation states** Events highlight in green when a drop is allowed and in red when a drop is blocked.
- **Assignment validation** Dropping is rejected if the same person is already assigned to that event or is assigned to another event that overlaps in time, and an error message appears at the bottom.
- **Successful assignment** A valid drop shows a confirmation message and adds that person's initials as a new attendee chip inside the target event.
- **Removing assignees** Hovering an attendee chip reveals an `X` action that removes that person from the event.
- **Undo flow** Removing an assignee opens a snackbar with a removal message and an Undo action. If Undo is used, the assignment is restored and a confirmation toast appears.

## Best for

- **Team assignment on scheduled work** Assigning people to meetings, sessions, or other already-scheduled timeline events without creating new events.
- **Resource-based planning** Managing assignments across parallel resource lanes such as rooms, workstations, or service areas.
- **Direct manipulation workflows** Interfaces where users need to drag people, equipment, or other external resources onto existing scheduled items.
- **Conflict-aware scheduling** Planning scenarios where duplicate assignments and overlapping time conflicts must be prevented during drop actions.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option
- [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate) - option
- [`eventDelete`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventDelete) - option
- [`showEventTooltip`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-showEventTooltip) - option
- [`timelineEventTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-timelineEventTemplate) - template

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component, NgZone } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscItemDragEvent,
  MbscModule,
  MbscResource,
  Notifications,
  setOptions,
} from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

interface Employee {
  id: string;
  name: string;
  avatar: string;
  color: string;
}

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  constructor(
    private notify: Notifications,
    private zone: NgZone,
  ) {}

  isExternalDragging = false;
  dropStates: Record<string, string> = {};

  myView: MbscEventcalendarView = {
    timeline: {
      type: 'week',
      startDay: 1,
      endDay: 5,
      startTime: '08:00',
      endTime: '18:00',
      timeCellStep: 60,
      timeLabelStep: 60,
      virtualScroll: false,
    },
  };

  rooms: MbscResource[] = [
    { id: 1, name: 'Conference Room' },
    { id: 2, name: 'Board Room' },
    { id: 3, name: 'Meeting Room' },
    { id: 4, name: 'Training Room' },
  ];

  meetings: MbscCalendarEvent[] = [
    {
      id: 'evt1',
      title: 'Sprint Planning',
      start: '2026-11-08T09:00',
      end: '2026-11-08T11:00',
      resource: 1,
      color: '#b52db9',
      attendees: [
        { id: 'emp1', name: 'Alice Martin', avatar: 'AM', color: '#e74c3c' },
        { id: 'emp2', name: 'Bob Johnson', avatar: 'BJ', color: '#3498db' },
      ],
    },
    {
      id: 'evt2',
      title: 'Budget Review',
      start: '2026-11-08T10:00',
      end: '2026-11-08T13:00',
      resource: 2,
      color: '#669ce2',
      attendees: [],
    },
    {
      id: 'evt3',
      title: 'Client Presentation',
      start: '2026-11-08T15:00',
      end: '2026-11-08T18:00',
      resource: 2,
      color: '#88bd42',
      attendees: [
        { id: 'emp3', name: 'Carol Smith', avatar: 'CS', color: '#2ecc71' },
        { id: 'emp4', name: 'David Lee', avatar: 'DL', color: '#f39c12' },
      ],
    },
    {
      id: 'evt4',
      title: 'Project Kickoff',
      start: '2026-11-08T09:00',
      end: '2026-11-08T11:00',
      resource: 3,
      color: '#b6962f',
      attendees: [],
    },
    {
      id: 'evt5',
      title: 'New Hire Orientation',
      start: '2026-11-08T13:00',
      end: '2026-11-08T16:00',
      resource: 4,
      color: '#c864f0',
      attendees: [],
    },
    {
      id: 'evt6',
      title: 'Design Review',
      start: '2026-11-08T13:00',
      end: '2026-11-08T15:00',
      resource: 1,
      color: '#c7682d',
      attendees: [],
    },
    {
      id: 'evt7',
      title: 'Product Demo',
      start: '2026-11-09T09:00',
      end: '2026-11-09T11:00',
      resource: 1,
      color: '#ad2b6c',
      attendees: [],
    },
    {
      id: 'evt8',
      title: 'Stakeholder Update',
      start: '2026-11-09T10:00',
      end: '2026-11-09T12:00',
      resource: 2,
      color: '#0f60ca',
      attendees: [],
    },
    {
      id: 'evt9',
      title: 'Code Review',
      start: '2026-11-09T10:00',
      end: '2026-11-09T12:00',
      resource: 3,
      color: '#56a823',
      attendees: [],
    },
    {
      id: 'evt10',
      title: 'Safety Training',
      start: '2026-11-09T13:00',
      end: '2026-11-09T16:00',
      resource: 4,
      color: '#aa36d8',
      attendees: [],
    },
    {
      id: 'evt11',
      title: 'Retrospective',
      start: '2026-11-10T09:00',
      end: '2026-11-10T11:00',
      resource: 1,
      color: '#c45f20',
      attendees: [],
    },
    {
      id: 'evt12',
      title: 'Board Briefing',
      start: '2026-11-10T13:00',
      end: '2026-11-10T16:00',
      resource: 2,
      color: '#1e58a5',
      attendees: [],
    },
    {
      id: 'evt13',
      title: 'Marketing Sync',
      start: '2026-11-10T10:00',
      end: '2026-11-10T12:00',
      resource: 3,
      color: '#549e27',
      attendees: [],
    },
    {
      id: 'evt14',
      title: 'API Workshop',
      start: '2026-11-10T13:00',
      end: '2026-11-10T16:00',
      resource: 4,
      color: '#7c1ca1',
      attendees: [],
    },
    {
      id: 'evt15',
      title: 'Architecture Review',
      start: '2026-11-11T09:00',
      end: '2026-11-11T11:30',
      resource: 1,
      color: '#a7511c',
      attendees: [],
    },
    {
      id: 'evt16',
      title: 'Quarterly Planning',
      start: '2026-11-11T13:00',
      end: '2026-11-11T16:00',
      resource: 2,
      color: '#13488d',
      attendees: [],
    },
    {
      id: 'evt17',
      title: 'Hiring Debrief',
      start: '2026-11-11T10:00',
      end: '2026-11-11T12:00',
      resource: 3,
      color: '#51ac19',
      attendees: [],
    },
    {
      id: 'evt18',
      title: 'Team Standup',
      start: '2026-11-07T09:00',
      end: '2026-11-07T11:00',
      resource: 1,
      color: '#e74c3c',
      attendees: [],
    },
    {
      id: 'evt19',
      title: 'Daily Scrum',
      start: '2026-11-07T10:00',
      end: '2026-11-07T13:00',
      resource: 2,
      color: '#3498db',
      attendees: [],
    },
    {
      id: 'evt20',
      title: 'Lunch Meeting',
      start: '2026-11-07T12:00',
      end: '2026-11-07T14:00',
      resource: 3,
      color: '#2ecc71',
      attendees: [],
    },
    {
      id: 'evt21',
      title: 'Weekly Sync',
      start: '2026-11-07T14:00',
      end: '2026-11-07T16:00',
      resource: 4,
      color: '#f39c12',
      attendees: [],
    },
    {
      id: 'evt22',
      title: 'Morning Briefing',
      start: '2026-11-06T09:00',
      end: '2026-11-06T11:00',
      resource: 1,
      color: '#9b59b6',
      attendees: [],
    },
    {
      id: 'evt23',
      title: 'Status Update',
      start: '2026-11-06T11:00',
      end: '2026-11-06T14:00',
      resource: 2,
      color: '#1abc9c',
      attendees: [],
    },
    {
      id: 'evt24',
      title: 'Client Call',
      start: '2026-11-06T13:00',
      end: '2026-11-06T15:00',
      resource: 3,
      color: '#e67e22',
      attendees: [],
    },
    {
      id: 'evt25',
      title: 'End of Day Review',
      start: '2026-11-06T16:00',
      end: '2026-11-06T18:00',
      resource: 4,
      color: '#34495e',
      attendees: [],
    },
  ];

  employees: Employee[] = [
    { id: 'emp1', name: 'Alice Martin', avatar: 'AM', color: '#e74c3c' },
    { id: 'emp2', name: 'Bob Johnson', avatar: 'BJ', color: '#3498db' },
    { id: 'emp3', name: 'Carol Smith', avatar: 'CS', color: '#2ecc71' },
    { id: 'emp4', name: 'David Lee', avatar: 'DL', color: '#f39c12' },
    { id: 'emp5', name: 'Eva Chen', avatar: 'EC', color: '#9b59b6' },
    { id: 'emp6', name: 'Frank Diaz', avatar: 'FD', color: '#1abc9c' },
    { id: 'emp7', name: 'Grace Kim', avatar: 'GK', color: '#e67e22' },
    { id: 'emp8', name: 'Henry Patel', avatar: 'HP', color: '#34495e' },
    { id: 'emp9', name: 'Ivy Torres', avatar: 'IT', color: '#e84393' },
    { id: 'emp10', name: 'Jack Murphy', avatar: 'JM', color: '#0984e3' },
  ];

  getAssignmentCount(empId: string): number {
    let count = 0;
    for (const meeting of this.meetings) {
      const attendees = meeting['attendees'] as Employee[];
      if (attendees && attendees.some((a) => a.id === empId)) {
        count++;
      }
    }
    return count;
  }

  findConflict(empId: string, targetEventId: string): MbscCalendarEvent | null {
    const target = this.meetings.find((m) => m.id === targetEventId);
    if (!target) return null;

    const targetStart = new Date(target.start as string).getTime();
    const targetEnd = new Date(target.end as string).getTime();

    for (const m of this.meetings) {
      if (m.id === targetEventId) continue;
      const attendees = m['attendees'] as Employee[];
      if (!attendees || !attendees.some((a) => a.id === empId)) continue;
      const mStart = new Date(m.start as string).getTime();
      const mEnd = new Date(m.end as string).getTime();
      if (mStart < targetEnd && mEnd > targetStart) return m;
    }
    return null;
  }

  onDragStart(): void {
    const onMove = () => {
      this.zone.run(() => {
        this.isExternalDragging = true;
      });
      document.removeEventListener('pointermove', onMove);
    };
    const onUp = () => {
      this.zone.run(() => {
        this.isExternalDragging = false;
      });
      document.removeEventListener('pointermove', onMove);
      document.removeEventListener('pointerup', onUp);
    };
    document.addEventListener('pointermove', onMove);
    document.addEventListener('pointerup', onUp);
  }

  onItemDrop(dropEvent: MbscItemDragEvent, eventId: string): void {
    const employee = dropEvent.data as Employee;
    this.dropStates[eventId] = '';

    const meeting = this.meetings.find((m) => m.id === eventId);
    if (!meeting) return;

    const attendees = meeting['attendees'] as Employee[];

    if (attendees.some((a) => a.id === employee.id)) {
      this.notify.toast({ message: employee.name + ' is already assigned', color: 'danger' });
      return;
    }

    const conflict = this.findConflict(employee.id, eventId);
    if (conflict) {
      this.notify.toast({ message: employee.name + ' already has a ' + conflict.title + ' on this timeslot', color: 'danger' });
      return;
    }

    attendees.push({ id: employee.id, name: employee.name, avatar: employee.avatar, color: employee.color });
    this.meetings = [...this.meetings];

    this.notify.toast({ message: employee.name + ' assigned to ' + meeting.title, color: 'success' });
  }

  onItemDragEnter(enterEvent: MbscItemDragEvent, eventId: string): void {
    const employee = enterEvent.data as Employee;
    const meeting = this.meetings.find((m) => m.id === eventId);
    if (!meeting) return;

    const attendees = meeting['attendees'] as Employee[];

    if (employee) {
      if (attendees.some((a) => a.id === employee.id)) {
        this.dropStates[eventId] = 'mds-drop-conflict';
      } else {
        const conflict = this.findConflict(employee.id, eventId);
        this.dropStates[eventId] = conflict ? 'mds-drop-conflict' : 'mds-drop-active';
      }
    } else {
      this.dropStates[eventId] = 'mds-drop-active';
    }
  }

  onItemDragLeave(eventId: string): void {
    this.dropStates[eventId] = '';
  }

  removeAttendee(eventId: string, empId: string, domEvent: Event): void {
    domEvent.stopPropagation();

    const meeting = this.meetings.find((m) => m.id === eventId);
    if (!meeting) return;

    const attendees = meeting['attendees'] as Employee[];
    const idx = attendees.findIndex((a) => a.id === empId);
    if (idx === -1) return;

    const removed = attendees[idx];
    attendees.splice(idx, 1);
    this.meetings = [...this.meetings];

    this.notify.snackbar({
      message: removed.name + ' removed from ' + meeting.title,
      button: {
        text: 'Undo',
        action: () => {
          attendees.splice(idx, 0, removed);
          this.meetings = [...this.meetings];
          this.notify.toast({ message: 'Assignment restored', color: 'success' });
        },
      },
    });
  }
}
```

### Template

```html
<mbsc-page [ngClass]="{'mds-drop-on-events-external-dragging': isExternalDragging}" class="mds-drop-on-events">
  <div class="mbsc-grid mbsc-no-padding">
    <div class="mbsc-row">
      <div class="mbsc-col-sm-3 mbsc-flex-col mds-drop-on-events-sidebar">
        <div class="mbsc-form-group-title">Team Members</div>
        <div class="mds-drop-on-events-employee-list mbsc-flex">
          <div
            *ngFor="let emp of employees"
            mbsc-draggable
            [dragData]="emp"
            class="mds-drop-on-events-employee-item mbsc-flex"
            (pointerdown)="onDragStart()"
          >
            <div class="mds-drop-on-events-employee-avatar mbsc-flex" [ngStyle]="{background: emp.color}">{{emp.avatar}}</div>
            <div class="mds-drop-on-events-employee-info mbsc-flex">
              <div class="mds-drop-on-events-employee-name">{{emp.name}}</div>
              <div class="mds-drop-on-events-employee-count">
                <ng-container *ngIf="getAssignmentCount(emp.id) > 0; else noAssignments">
                  {{getAssignmentCount(emp.id)}} meeting{{getAssignmentCount(emp.id) > 1 ? 's' : ''}}
                </ng-container>
                <ng-template #noAssignments>No assignments</ng-template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mbsc-col-sm-9 mds-drop-on-events-calendar-wrapper">
        <mbsc-eventcalendar
          [view]="myView"
          [data]="meetings"
          [resources]="rooms"
          [dragToCreate]="false"
          [dragToMove]="false"
          [dragToResize]="false"
          [clickToCreate]="false"
          [eventDelete]="false"
          [showEventTooltip]="false"
          [timelineEventTemplate]="eventTemplate"
        ></mbsc-eventcalendar>
      </div>
    </div>
  </div>
</mbsc-page>

<ng-template #eventTemplate let-data>
  <mbsc-dropcontainer
    class="mds-drop-on-events-custom-event mbsc-flex"
    [ngStyle]="{'border-left': '4px solid ' + data.original.color}"
    [ngClass]="dropStates[data.original.id]"
    (onItemDrop)="onItemDrop($event, data.original.id)"
    (onItemDragEnter)="onItemDragEnter($event, data.original.id)"
    (onItemDragLeave)="onItemDragLeave(data.original.id)"
  >
    <div class="mds-drop-on-events-event-header mbsc-flex">
      <div class="mds-drop-on-events-event-title">{{data.original.title}}</div>
      <div class="mds-drop-on-events-event-time">{{data.start}} - {{data.end}}</div>
    </div>
    <div *ngIf="data.original.attendees?.length" class="mds-drop-on-events-event-attendees mbsc-flex">
      <span
        *ngFor="let attendee of data.original.attendees"
        class="mds-drop-on-events-attendee-chip"
        [ngStyle]="{background: attendee.color}"
        [title]="attendee.name + ' (click to remove)'"
        (click)="removeAttendee(data.original.id, attendee.id, $event)"
      >
        {{attendee.avatar}}
        <span class="mds-drop-on-events-attendee-remove">×</span>
      </span>
    </div>
    <div class="mds-drop-on-events-event-drop-hint">Drop people to assign</div>
  </mbsc-dropcontainer>
</ng-template>
```

### CSS

```css
.mds-drop-on-events,
.mds-drop-on-events .mbsc-grid,
.mds-drop-on-events .mbsc-row {
  height: 100%;
}
.mds-drop-on-events-sidebar {
  overflow-y: auto;
}
.mds-drop-on-events-employee-list {
  padding: 8px;
  flex-direction: column;
  gap: 4px;
}
.mds-drop-on-events-employee-item {
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: grab;
  user-select: none;
  background: rgba(128, 128, 128, 0.5);
  margin: 0 5px 5px 5px;
  touch-action: none;
  transition:
    background 0.15s,
    box-shadow 0.2s,
    transform 0.15s;
}
.mds-drop-on-events-employee-item:hover {
  background: rgba(128, 128, 128, 0.4);
  transform: translateY(-1px);
}
.mds-drop-on-events-employee-item:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.mds-drop-on-events-employee-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.mds-drop-on-events-employee-info {
  flex-direction: column;
  overflow: hidden;
}
.mds-drop-on-events-employee-name {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mds-drop-on-events-employee-count {
  font-size: 13px;
  opacity: 0.55;
}
.mds-drop-on-events-calendar-wrapper {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
/* Drag clone is appended to body, outside the root — keep unscoped */
.mds-drop-on-events-employee-item.mbsc-drag-clone {
  opacity: 0.8;
}
.mds-drop-on-events-custom-event {
  background: #cccccc;
  border-radius: 6px;
  padding: 6px 8px;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  outline: 2px solid transparent;
  transition: background 0.15s;
  position: relative;
}
.mds-drop-on-events-event-header {
  flex-direction: column;
  gap: 1px;
}
.mds-drop-on-events-event-title {
  font-size: 14px;
  font-weight: 600;
  color: #181818;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mds-drop-on-events-event-time {
  font-size: 12px;
  color: #545454;
}
.mds-drop-on-events-event-attendees {
  flex-wrap: wrap;
  gap: 3px;
}
/* Drop hint - hidden by default, shown only during external drag */
.mds-drop-on-events-event-drop-hint {
  display: none;
  font-size: 11px;
  font-style: italic;
  color: #686868;
}
/* Show drop hints and dashed borders on events during external drag */
.mds-drop-on-events-external-dragging .mds-drop-on-events-event-drop-hint {
  display: block;
}
.mds-drop-on-events-external-dragging .mds-drop-on-events-custom-event {
  outline: 2px dashed #b9b9b9;
}
.mds-drop-on-events-attendee-chip {
  display: flex;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  position: relative;
}
.mds-drop-on-events-attendee-remove {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}
.mds-drop-on-events-attendee-chip:hover .mds-drop-on-events-attendee-remove {
  display: flex;
}
.mds-drop-on-events-custom-event.mds-drop-active {
  cursor: copy;
  outline: 2px solid rgba(54, 133, 43, 0.8);
  background: rgba(180, 223, 173, 0.8);
}
.mds-drop-on-events-custom-event.mds-drop-conflict {
  cursor: not-allowed;
  outline: 2px solid rgba(145, 34, 34, 0.8);
  background: rgba(235, 194, 194, 0.8);
}
.mds-drop-on-events .mbsc-timeline-event {
  min-height: 80px;
}
.mds-drop-on-events .mbsc-schedule-event-inner {
  height: 100%;
}
```

## Implementation notes

- Use `type: 'week'` with `startDay: 1`, `endDay: 5`, `startTime: '08:00'`, `endTime: '18:00'`, `timeCellStep: 60`, `timeLabelStep: 60`, and `virtualScroll: false`.
- Define resources as a flat list of rooms. Disable all calendar-level interaction: set `dragToCreate`, `dragToMove`, `dragToResize`, `clickToCreate`, and `eventDelete` to `false`, and `showEventTooltip` to `false`.
- Render each employee item with a ref-callback to obtain its DOM element, then mount a `Draggable` with `dragData={emp}` and `element={elem}`. Show the employee's current assignment count (derived live from the meetings state) beneath their name.
- Track global drag state by attaching `pointermove` and `pointerup` listeners to `document` on each employee item's `onPointerDown`. Set an `isExternalDragging` boolean state on first move and clear it on pointer up. Apply this as a CSS class on the page wrapper to reveal the "Drop people to assign" hint and suppress Mobiscroll's built-in event hover overlays during drag.
- In `renderTimelineEvent` (Angular: `timelineEventTemplate`, Vue: `#timelineEvent` slot), render each meeting as a `MeetingEvent` component that uses a ref-callback for its root element and mounts a `Dropcontainer element={dropEl}` inside. Keep a local `dropState` string for visual feedback CSS classes.
- In `onItemDragEnter`, run the duplicate and conflict checks against `args.data` (the dragged employee) and set `dropState` to an active or conflict class accordingly. In `onItemDragLeave`, reset `dropState` to an empty string.
- In `onItemDrop`, check whether the employee is already in the event's `attendees` array (duplicate) and call `findConflict` to detect time-overlapping assignments across other meetings. Show an error `Toast` with `color: 'danger'` for either failure; call `onAssign` and show a success `Toast` on a valid drop.
- Implement `findConflict(empId, targetEventId)` by scanning all meetings for ones where the employee is already assigned and whose time range overlaps with the target event. Read from a `meetingsRef` (kept in sync via `useEffect`) rather than from state directly to avoid stale closure issues.
- On assignment, spread the employee object into the target event's `attendees` array via a state updater. Render current attendees as colored chips inside the event card; on chip click, call `stopPropagation`, remove the attendee from state, and open a `Snackbar` with an Undo button. On Undo, restore the attendee and show a success `Toast`.

## 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-angular.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 angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [36-Hour Rolling Window Schedule](https://demo.mobiscroll.com/angular/timeline/36-hour-rolling-window-aircraft-view.md) - Build a fleet scheduling view on the Angular Timeline — a 36-hour rolling window that auto-advances from the current hour.
- Next: [Truck Dispatch Planning](https://demo.mobiscroll.com/angular/timeline/truck-transport-planning-and-dispatch.md) - Assign transports on the Angular timeline — hide trucks with capacity or time-window conflicts during drag and snap failed drops to the nearest valid slot.