---
title: "Scheduler Drop Assignee on Event Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/scheduler/drop-assignee-on-event-from-list"
---

# Drop Assignee on Event - JavaScript Scheduler demo

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

- [Live demo](https://demo.mobiscroll.com/scheduler/drop-assignee-on-event-from-list)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/drop-assignee-on-event-from-list)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/drop-assignee-on-event-from-list.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/drop-assignee-on-event-from-list.md), [React](https://demo.mobiscroll.com/react/scheduler/drop-assignee-on-event-from-list.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/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/javascript/eventcalendar/drag-and-drop#dropcontainer) comes in. Each event rendered through the [`renderSchedulerEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderSchedulerEvent) 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`](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#event-onItemDrop) event handles the assignment, while [`onItemDragEnter`](https://mobiscroll.com/docs/javascript/eventcalendar/drag-and-drop#event-onItemDragEnter) and [`onItemDragLeave`](https://mobiscroll.com/docs/javascript/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/scheduler/external-drag-drop-sortable-dragula)

## What this demo shows

- A weekly scheduler layout that displays multiple resources across the top, weekdays from Monday through Friday, an all-day row, and a scrollable time grid from 8:00 AM to 6:00 PM.
- **Scheduler layout** Each resource column contains sequential timed events, with default scheduler navigation controls above the calendar, including the month picker, previous and next arrows, and the Today button.
- **Events** Meetings are rendered as gray event cards with a colored stripe on the left and attendee chips inside the card showing the initials of assigned participants.
- **Team list** A separate list of team members is shown beside the scheduler, with each item displaying initials, name, and a status line that shows either no assignment or the meeting currently assigned to that person.
- **External drag and drop** Team members can be dragged from the side list and dropped onto existing meetings instead of onto empty scheduler cells.
- **Drop feedback** When dragging starts, meetings show a dashed outline and a placeholder message so each event becomes an obvious drop target.
- **Validation state** The hovered event indicates whether the drop is allowed, using green for a valid assignment and red when the assignment is rejected.
- **Assignment rules** The demo prevents assigning the same person to the same event more than once and blocks assignments when that person is already booked in an overlapping event.
- **Messages** Invalid drops show an error message, while successful drops show a confirmation message and add the person's initials to the event.
- **Chip actions** Assigned people can be removed directly from an event by clicking the close action on their chip.
- **Undo flow** Removing an assignment shows a snackbar with an Undo action, and restoring the assignment displays a confirmation toast.
- **Scrolling** The full view supports both vertical and horizontal scrolling.

## Best for

- **Room and team coordination** Scheduler setups where meetings are already scheduled and people need to be assigned to those meetings across multiple rooms or resources.
- **External resource assignment** Workflows that require dragging people, equipment, or other external items onto existing events instead of creating new events from the external list.
- **Conflict-aware planning** Scheduling interfaces where assignment conflicts, duplicate assignments, and overlapping bookings need immediate validation during drag and drop.
- **Operations dashboards** Resource planning views that benefit from a side list of assignable items and a scheduler that shows the impact of changes in context.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`showEventTooltip`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-showEventTooltip) - option
- [`renderSchedulerEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderSchedulerEvent) - renderer
- [`onPageLoaded`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoaded) - event

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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

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

var 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' },
];

var container = document.querySelector('.mds-drop-on-events');

function getAssignmentCount(empId) {
  var count = 0;
  for (var i = 0; i < meetings.length; i++) {
    for (var j = 0; j < meetings[i].attendees.length; j++) {
      if (meetings[i].attendees[j].id === empId) {
        count++;
      }
    }
  }
  return count;
}

function findConflict(empId, targetEventId) {
  var target;
  for (var i = 0; i < meetings.length; i++) {
    if (meetings[i].id === targetEventId) {
      target = meetings[i];
      break;
    }
  }
  if (!target) {
    return null;
  }

  var targetStart = new Date(target.start).getTime();
  var targetEnd = new Date(target.end).getTime();

  for (var j = 0; j < meetings.length; j++) {
    var m = meetings[j];
    if (m.id === targetEventId) {
      continue;
    }

    var isAssigned = false;
    for (var k = 0; k < m.attendees.length; k++) {
      if (m.attendees[k].id === empId) {
        isAssigned = true;
        break;
      }
    }
    if (!isAssigned) {
      continue;
    }

    var mStart = new Date(m.start).getTime();
    var mEnd = new Date(m.end).getTime();

    if (mStart < targetEnd && mEnd > targetStart) {
      return m;
    }
  }

  return null;
}

function renderEmployeeList() {
  var listHtml = '';
  for (var i = 0; i < employees.length; i++) {
    var emp = employees[i];
    var count = getAssignmentCount(emp.id);
    listHtml +=
      '<div class="mds-drop-on-events-employee-item mbsc-flex" id="mds-emp-' +
      emp.id +
      '">' +
      '<div class="mds-drop-on-events-employee-avatar mbsc-flex" style="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>' +
      (count > 0
        ? '<div class="mds-drop-on-events-employee-count">' + count + ' meeting' + (count > 1 ? 's' : '') + '</div>'
        : '<div class="mds-drop-on-events-employee-count">No assignments</div>') +
      '</div>' +
      '</div>';
  }
  document.getElementById('external-employee-list').innerHTML = listHtml;

  for (var j = 0; j < employees.length; j++) {
    (function (employee) {
      mobiscroll.draggable('#mds-emp-' + employee.id, {
        dragData: employee,
      });
    })(employees[j]);
  }

  // Track drag start/end to toggle global dragging state
  var empList = document.getElementById('external-employee-list');
  empList.removeEventListener('pointerdown', empList._mdsPointerDown);
  empList._mdsPointerDown = function (e) {
    if (!e.target.closest('.mds-drop-on-events-employee-item')) {
      return;
    }
    function onMove() {
      container.classList.add('mds-drop-on-events-external-dragging');
      document.removeEventListener('pointermove', onMove);
    }
    function onUp() {
      container.classList.remove('mds-drop-on-events-external-dragging');
      document.removeEventListener('pointermove', onMove);
      document.removeEventListener('pointerup', onUp);
    }
    document.addEventListener('pointermove', onMove);
    document.addEventListener('pointerup', onUp);
  };
  empList.addEventListener('pointerdown', empList._mdsPointerDown);
}

renderEmployeeList();

function renderEvent(data) {
  var event = data.original;
  var attendees = event.attendees || [];

  var attendeesHtml = '';
  if (attendees.length > 0) {
    attendeesHtml = '<div class="mds-drop-on-events-event-attendees mbsc-flex">';
    for (var i = 0; i < attendees.length; i++) {
      attendeesHtml +=
        '<span class="mds-drop-on-events-attendee-chip" style="background:' +
        attendees[i].color +
        '" title="' +
        attendees[i].name +
        ' (click to remove)"' +
        ' data-emp-id="' +
        attendees[i].id +
        '">' +
        attendees[i].avatar +
        '<span class="mds-drop-on-events-attendee-remove">×</span>' +
        '</span>';
    }
    attendeesHtml += '</div>';
  }

  return (
    '<div class="mds-drop-on-events-custom-event mbsc-flex" style="border-left: 4px solid ' +
    event.color +
    '" data-event-id="' +
    event.id +
    '">' +
    '<div class="mds-drop-on-events-event-header mbsc-flex">' +
    '<div class="mds-drop-on-events-event-title">' +
    event.title +
    '</div>' +
    '<div class="mds-drop-on-events-event-time">' +
    data.start +
    ' - ' +
    data.end +
    '</div>' +
    '</div>' +
    attendeesHtml +
    '<div class="mds-drop-on-events-event-drop-hint">Drop people to assign</div>' +
    '</div>'
  );
}

function initDropZones() {
  var zones = document.querySelectorAll('.mds-drop-on-events-custom-event');
  zones.forEach(function (zone) {
    var eventId = zone.getAttribute('data-event-id');

    mobiscroll.dropcontainer(zone, {
      onItemDrop: function (dropEvent) {
        var employee = dropEvent.data;

        zone.classList.remove('mds-drop-active', 'mds-drop-conflict');

        for (var i = 0; i < meetings.length; i++) {
          if (meetings[i].id === eventId) {
            var m = meetings[i];

            // Prevent duplicate assignment
            for (var k = 0; k < m.attendees.length; k++) {
              if (m.attendees[k].id === employee.id) {
                mobiscroll.toast({
                  message: employee.name + ' is already assigned',
                  color: 'danger',
                });
                return;
              }
            }

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

            m.attendees.push({
              id: employee.id,
              name: employee.name,
              avatar: employee.avatar,
              color: employee.color,
            });

            setTimeout(function () {
              calendar.setEvents(meetings);
              renderEmployeeList();
            }, 0);

            mobiscroll.toast({
              message: employee.name + ' assigned to ' + m.title,
              color: 'success',
            });
            break;
          }
        }
      },
      onItemDragEnter: function (enterEvent) {
        var employee = enterEvent.data;

        zone.classList.remove('mds-drop-active', 'mds-drop-conflict');

        if (employee) {
          var alreadyAssigned = false;
          for (var i = 0; i < meetings.length; i++) {
            if (meetings[i].id === eventId) {
              for (var k = 0; k < meetings[i].attendees.length; k++) {
                if (meetings[i].attendees[k].id === employee.id) {
                  alreadyAssigned = true;
                  break;
                }
              }
              break;
            }
          }

          if (alreadyAssigned) {
            zone.classList.add('mds-drop-conflict');
          } else {
            var conflict = findConflict(employee.id, eventId);
            if (conflict) {
              zone.classList.add('mds-drop-conflict');
            } else {
              zone.classList.add('mds-drop-active');
            }
          }
        } else {
          zone.classList.add('mds-drop-active');
        }
      },
      onItemDragLeave: function () {
        zone.classList.remove('mds-drop-active', 'mds-drop-conflict');
      },
    });
  });

  // Handle attendee removal on chip click
  document.querySelectorAll('.mds-drop-on-events-attendee-chip').forEach(function (chip) {
    chip.addEventListener('click', function (e) {
      e.stopPropagation();
      var empId = chip.getAttribute('data-emp-id');
      var eventZone = chip.closest('.mds-drop-on-events-custom-event');
      var chipEventId = eventZone.getAttribute('data-event-id');

      for (var i = 0; i < meetings.length; i++) {
        if (meetings[i].id === chipEventId) {
          var attendees = meetings[i].attendees;
          for (var j = 0; j < attendees.length; j++) {
            if (attendees[j].id === empId) {
              var removedAttendee = attendees[j];
              var removedIndex = j;
              var meetingRef = meetings[i];

              attendees.splice(j, 1);
              calendar.setEvents(meetings);
              renderEmployeeList();

              (function (att, idx, meeting) {
                mobiscroll.snackbar({
                  message: att.name + ' removed from ' + meeting.title,
                  button: {
                    text: 'Undo',
                    action: function () {
                      meeting.attendees.splice(idx, 0, att);
                      calendar.setEvents(meetings);
                      renderEmployeeList();
                      mobiscroll.toast({
                        message: 'Assignment restored',
                        color: 'success',
                      });
                    },
                  },
                });
              })(removedAttendee, removedIndex, meetingRef);

              break;
            }
          }
          break;
        }
      }
    });
  });
}

var calendar = mobiscroll.eventcalendar('#demo-scheduler-drop-assignee-on-event-from-list', {
  view: {
    scheduler: {
      type: 'week',
      startDay: 1,
      endDay: 5,
      startTime: '08:00',
      endTime: '18:00',
      timeCellStep: 30,
      timeLabelStep: 30,
      virtualScroll: false,
    },
  },
  data: meetings,
  resources: rooms,
  dragToCreate: false,
  dragToMove: false,
  dragToResize: false,
  clickToCreate: false,
  eventDelete: false,
  showEventTooltip: false,
  renderSchedulerEvent: renderEvent,
  onPageLoaded: initDropZones,
});
```

### HTML

```html
<div class="mds-drop-on-events" mbsc-page>
  <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 id="external-employee-list" class="mds-drop-on-events-employee-list mbsc-flex"></div>
      </div>
      <div class="mbsc-col-sm-9 mds-drop-on-events-calendar-wrapper">
        <div id="demo-scheduler-drop-assignee-on-event-from-list"></div>
      </div>
    </div>
  </div>
</div>
```

### 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, .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, .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);
}
/* Source item left behind in the sidebar while dragging */
.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-scheduler-event {
  min-height: 80px;
}
.mds-drop-on-events .mbsc-schedule-event-inner {
  height: 100%;
}
```

## Implementation notes

- Configure the scheduler with `type: 'week'`, `startDay: 1`, `endDay: 5`, `startTime: '08:00'`, `endTime: '18:00'`, and a list of room resources.
- Use `renderSchedulerEvent` (Angular: `schedulerEventTemplate`, Vue: `#schedulerEvent` slot) to render each event as a `Dropcontainer`; display current assignees as initials chips inside the card, and apply a dashed-outline and placeholder-text CSS state to all event cards while a `Draggable` drag is active.
- Build the team sidebar as a list of `Draggable` items, each showing initials, name, and a status line with a count of current meeting assignments or a "No assignments" label.
- In `onItemDragEnter` on each event's `Dropcontainer`, check for a duplicate assignment on that event and for a time conflict with any other event the person is already in; apply a green or red card highlight. Clear the highlight in `onItemDragLeave`.
- In `onItemDrop`, re-run the same validation: if invalid, show an error toast; if valid, add the person to the event's attendee list, show a confirmation toast, and update their sidebar assignment status.
- Make each attendee chip removable via a close icon; on removal show a `Snackbar` with an Undo action, and on undo restore the assignment and show a confirmation 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

- Previous: [Rota Planning](https://demo.mobiscroll.com/scheduler/24-hour-manufacturing-shift-rota-planning.md) - Build a 24-hour rotating crew rota with the JavaScript Scheduler — three crews, three shifts, and automatic conflict resolution when shifts move.