Angular Scheduler Drop Assignee on Event

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 comes in. Each event rendered through the schedulerEventTemplate 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 scheduler. The onItemDrop event handles the assignment, while onItemDragEnter and 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 →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Drag team members from an external list onto existing meetings in the Scheduler — with drop feedback and conflict validation.

Code

View code on GitHub 
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendarOptions,
  MbscEventcalendarView,
  MbscItemDragEvent,
  MbscModule,
  Notifications,
  setOptions ,
} from '@mobiscroll/angular';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

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

  rooms = [
    { 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-06T09:00',
      end: '2026-11-06T11: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-06T10:00',
      end: '2026-11-06T13:00',
      resource: 2,
      color: '#669ce2',
      attendees: [],
    },
    {
      id: 'evt3',
      title: 'Client Presentation',
      start: '2026-11-06T15:00',
      end: '2026-11-06T18: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-06T09:00',
      end: '2026-11-06T11:00',
      resource: 3,
      color: '#b6962f',
      attendees: [],
    },
    {
      id: 'evt5',
      title: 'New Hire Orientation',
      start: '2026-11-06T13:00',
      end: '2026-11-06T16:00',
      resource: 4,
      color: '#c864f0',
      attendees: [],
    },
    {
      id: 'evt6',
      title: 'Design Review',
      start: '2026-11-06T13:00',
      end: '2026-11-06T15:00',
      resource: 1,
      color: '#c7682d',
      attendees: [],
    },
    {
      id: 'evt7',
      title: 'Product Demo',
      start: '2026-11-07T09:00',
      end: '2026-11-07T11:00',
      resource: 1,
      color: '#ad2b6c',
      attendees: [],
    },
    {
      id: 'evt8',
      title: 'Stakeholder Update',
      start: '2026-11-07T10:00',
      end: '2026-11-07T12:00',
      resource: 2,
      color: '#0f60ca',
      attendees: [],
    },
    {
      id: 'evt9',
      title: 'Code Review',
      start: '2026-11-07T10:00',
      end: '2026-11-07T12:00',
      resource: 3,
      color: '#56a823',
      attendees: [],
    },
    {
      id: 'evt10',
      title: 'Safety Training',
      start: '2026-11-07T13:00',
      end: '2026-11-07T16:00',
      resource: 4,
      color: '#aa36d8',
      attendees: [],
    },
    {
      id: 'evt11',
      title: 'Retrospective',
      start: '2026-11-08T09:00',
      end: '2026-11-08T11:00',
      resource: 1,
      color: '#c45f20',
      attendees: [],
    },
    {
      id: 'evt12',
      title: 'Board Briefing',
      start: '2026-11-08T13:00',
      end: '2026-11-08T16:00',
      resource: 2,
      color: '#1e58a5',
      attendees: [],
    },
    {
      id: 'evt13',
      title: 'Marketing Sync',
      start: '2026-11-08T10:00',
      end: '2026-11-08T12:00',
      resource: 3,
      color: '#549e27',
      attendees: [],
    },
    {
      id: 'evt14',
      title: 'API Workshop',
      start: '2026-11-08T13:00',
      end: '2026-11-08T16:00',
      resource: 4,
      color: '#7c1ca1',
      attendees: [],
    },
    {
      id: 'evt15',
      title: 'Architecture Review',
      start: '2026-11-09T09:00',
      end: '2026-11-09T11:30',
      resource: 1,
      color: '#a7511c',
      attendees: [],
    },
    {
      id: 'evt16',
      title: 'Quarterly Planning',
      start: '2026-11-09T13:00',
      end: '2026-11-09T16:00',
      resource: 2,
      color: '#13488d',
      attendees: [],
    },
    {
      id: 'evt17',
      title: 'Hiring Debrief',
      start: '2026-11-09T10:00',
      end: '2026-11-09T12:00',
      resource: 3,
      color: '#51ac19',
      attendees: [],
    },
    {
      id: 'evt18',
      title: 'Team Standup',
      start: '2026-11-05T09:00',
      end: '2026-11-05T11:00',
      resource: 1,
      color: '#e74c3c',
      attendees: [],
    },
    {
      id: 'evt19',
      title: 'Daily Scrum',
      start: '2026-11-05T10:00',
      end: '2026-11-05T13:00',
      resource: 2,
      color: '#3498db',
      attendees: [],
    },
    {
      id: 'evt20',
      title: 'Lunch Meeting',
      start: '2026-11-05T12:00',
      end: '2026-11-05T14:00',
      resource: 3,
      color: '#2ecc71',
      attendees: [],
    },
    {
      id: 'evt21',
      title: 'Weekly Sync',
      start: '2026-11-05T14:00',
      end: '2026-11-05T16:00',
      resource: 4,
      color: '#f39c12',
      attendees: [],
    },
    {
      id: 'evt22',
      title: 'Morning Briefing',
      start: '2026-11-04T09:00',
      end: '2026-11-04T11:00',
      resource: 1,
      color: '#9b59b6',
      attendees: [],
    },
    {
      id: 'evt23',
      title: 'Status Update',
      start: '2026-11-04T11:00',
      end: '2026-11-04T14:00',
      resource: 2,
      color: '#1abc9c',
      attendees: [],
    },
    {
      id: 'evt24',
      title: 'Client Call',
      start: '2026-11-04T13:00',
      end: '2026-11-04T15:00',
      resource: 3,
      color: '#e67e22',
      attendees: [],
    },
    {
      id: 'evt25',
      title: 'End of Day Review',
      start: '2026-11-04T16:00',
      end: '2026-11-04T18:00',
      resource: 4,
      color: '#34495e',
      attendees: [],
    },
  ];

  employees = [
    { 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' },
  ];

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

  calendarView: MbscEventcalendarView = {
    scheduler: {
      type: 'week',
      startDay: 1,
      endDay: 5,
      startTime: '08:00',
      endTime: '18:00',
      timeCellStep: 30,
      timeLabelStep: 30,
      virtualScroll: false,
    },
  };

  calendarOptions: MbscEventcalendarOptions = {
    dragToCreate: false,
    dragToMove: false,
    dragToResize: false,
    clickToCreate: false,
    eventDelete: false,
    showEventTooltip: false,
  };

  getAssignmentCount(empId: string): number {
    let count = 0;
    for (const m of this.meetings) {
      const attendees = (m as any).attendees || [];
      count += attendees.filter((a: any) => a.id === empId).length;
    }
    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 as any).attendees || [];
      if (!attendees.some((a: any) => 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;
  }

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

    this.dropStateMap[eventId] = '';

    // Prevent duplicate assignment
    if (meeting.attendees.some((a: any) => a.id === employee.id)) {
      this.notify.toast({
        message: employee['name'] + ' is already assigned',
        color: 'danger',
      });
      return;
    }

    // Check for time conflicts
    const conflict = this.findConflict(employee.id as string, eventId);
    if (conflict) {
      this.notify.toast({
        message: employee['name'] + ' already has a ' + conflict.title + ' on this timeslot',
        color: 'danger',
      });
      return;
    }

    meeting.attendees = [
      ...meeting.attendees,
      { 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',
    });
  }

  onEventDragEnter(args: MbscItemDragEvent, eventId: string): void {
    const employee = args.data;
    const meeting = this.meetings.find((m) => m.id === eventId) as any;

    if (employee && meeting && employee.id) {
      if (meeting.attendees.some((a: any) => a.id === employee.id) || this.findConflict(employee.id as string, eventId)) {
        this.dropStateMap[eventId] = 'conflict';
      } else {
        this.dropStateMap[eventId] = 'active';
      }
    } else {
      this.dropStateMap[eventId] = 'active';
    }

    this.dropStateMap = { ...this.dropStateMap };
  }

  onEventDragLeave(eventId: string): void {
    this.dropStateMap = { ...this.dropStateMap, [eventId]: '' };
  }

  removeAttendee(eventId: string, empId: string): void {
    const meeting = this.meetings.find((m) => m.id === eventId) as any;
    if (!meeting) return;

    const idx = meeting.attendees.findIndex((a: any) => a.id === empId);
    if (idx === -1) return;

    const removedAtt = meeting.attendees[idx];
    meeting.attendees = [...meeting.attendees.slice(0, idx), ...meeting.attendees.slice(idx + 1)];
    this.meetings = [...this.meetings];

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

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

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.