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

# Drag People onto Events - JavaScript Timeline demo

Build a team assignment interface on a Javascript Timeline — drag people from an external list onto booked meetings. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/drop-assignee-on-event-from-list)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/drop-assignee-on-event-from-list)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/drop-assignee-on-event-from-list.md), [Angular](https://demo.mobiscroll.com/angular/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/javascript/eventcalendar/drag-and-drop#dropcontainer) comes in. Each event rendered through the [`renderTimelineEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderTimelineEvent) 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/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/javascript/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/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
- [`renderTimelineEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderTimelineEvent) - 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-10-20T09:00',
    end: '2026-10-20T11: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-10-20T10:00',
    end: '2026-10-20T13:00',
    resource: 2,
    color: '#669ce2',
    attendees: [],
  },
  {
    id: 'evt3',
    title: 'Client Presentation',
    start: '2026-10-20T15:00',
    end: '2026-10-20T18: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-10-20T09:00',
    end: '2026-10-20T11:00',
    resource: 3,
    color: '#b6962f',
    attendees: [],
  },
  {
    id: 'evt5',
    title: 'New Hire Orientation',
    start: '2026-10-20T13:00',
    end: '2026-10-20T16:00',
    resource: 4,
    color: '#c864f0',
    attendees: [],
  },
  {
    id: 'evt6',
    title: 'Design Review',
    start: '2026-10-20T13:00',
    end: '2026-10-20T15:00',
    resource: 1,
    color: '#c7682d',
    attendees: [],
  },
  {
    id: 'evt7',
    title: 'Product Demo',
    start: '2026-10-21T09:00',
    end: '2026-10-21T11:00',
    resource: 1,
    color: '#ad2b6c',
    attendees: [],
  },
  {
    id: 'evt8',
    title: 'Stakeholder Update',
    start: '2026-10-21T10:00',
    end: '2026-10-21T12:00',
    resource: 2,
    color: '#0f60ca',
    attendees: [],
  },
  {
    id: 'evt9',
    title: 'Code Review',
    start: '2026-10-21T10:00',
    end: '2026-10-21T12:00',
    resource: 3,
    color: '#56a823',
    attendees: [],
  },
  {
    id: 'evt10',
    title: 'Safety Training',
    start: '2026-10-21T13:00',
    end: '2026-10-21T16:00',
    resource: 4,
    color: '#aa36d8',
    attendees: [],
  },
  {
    id: 'evt11',
    title: 'Retrospective',
    start: '2026-10-22T09:00',
    end: '2026-10-22T11:00',
    resource: 1,
    color: '#c45f20',
    attendees: [],
  },
  {
    id: 'evt12',
    title: 'Board Briefing',
    start: '2026-10-22T13:00',
    end: '2026-10-22T16:00',
    resource: 2,
    color: '#1e58a5',
    attendees: [],
  },
  {
    id: 'evt13',
    title: 'Marketing Sync',
    start: '2026-10-22T10:00',
    end: '2026-10-22T12:00',
    resource: 3,
    color: '#549e27',
    attendees: [],
  },
  {
    id: 'evt14',
    title: 'API Workshop',
    start: '2026-10-22T13:00',
    end: '2026-10-22T16:00',
    resource: 4,
    color: '#7c1ca1',
    attendees: [],
  },
  {
    id: 'evt15',
    title: 'Architecture Review',
    start: '2026-10-23T09:00',
    end: '2026-10-23T11:30',
    resource: 1,
    color: '#a7511c',
    attendees: [],
  },
  {
    id: 'evt16',
    title: 'Quarterly Planning',
    start: '2026-10-23T13:00',
    end: '2026-10-23T16:00',
    resource: 2,
    color: '#13488d',
    attendees: [],
  },
  {
    id: 'evt17',
    title: 'Hiring Debrief',
    start: '2026-10-23T10:00',
    end: '2026-10-23T12:00',
    resource: 3,
    color: '#51ac19',
    attendees: [],
  },
  {
    id: 'evt18',
    title: 'Team Standup',
    start: '2026-10-19T09:00',
    end: '2026-10-19T11:00',
    resource: 1,
    color: '#e74c3c',
    attendees: [],
  },
  {
    id: 'evt19',
    title: 'Daily Scrum',
    start: '2026-10-19T10:00',
    end: '2026-10-19T13:00',
    resource: 2,
    color: '#3498db',
    attendees: [],
  },
  {
    id: 'evt20',
    title: 'Lunch Meeting',
    start: '2026-10-19T12:00',
    end: '2026-10-19T14:00',
    resource: 3,
    color: '#2ecc71',
    attendees: [],
  },
  {
    id: 'evt21',
    title: 'Weekly Sync',
    start: '2026-10-19T14:00',
    end: '2026-10-19T16:00',
    resource: 4,
    color: '#f39c12',
    attendees: [],
  },
  {
    id: 'evt22',
    title: 'Morning Briefing',
    start: '2026-10-18T09:00',
    end: '2026-10-18T11:00',
    resource: 1,
    color: '#9b59b6',
    attendees: [],
  },
  {
    id: 'evt23',
    title: 'Status Update',
    start: '2026-10-18T11:00',
    end: '2026-10-18T14:00',
    resource: 2,
    color: '#1abc9c',
    attendees: [],
  },
  {
    id: 'evt24',
    title: 'Client Call',
    start: '2026-10-18T13:00',
    end: '2026-10-18T15:00',
    resource: 3,
    color: '#e67e22',
    attendees: [],
  },
  {
    id: 'evt25',
    title: 'End of Day Review',
    start: '2026-10-18T16:00',
    end: '2026-10-18T18: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' },
  { id: 'emp10', name: 'Jack Murphy', avatar: 'JM', color: '#0984e3' },
];

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 list = document.getElementById('external-employee-list');
  list.innerHTML = '';

  for (var i = 0; i < employees.length; i++) {
    var emp = employees[i];
    var count = getAssignmentCount(emp.id);

    var item = document.createElement('div');
    item.className = 'mds-drop-on-events-employee-item mbsc-flex';
    item.id = 'mds-emp-' + emp.id;
    item.innerHTML =
      '<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>';

    list.appendChild(item);

    mobiscroll.draggable('#mds-emp-' + emp.id, {
      dragData: emp,
    });
  }

  // Track drag start/end to toggle global dragging state
  if (list._mdsPointerDown) {
    list.removeEventListener('pointerdown', list._mdsPointerDown);
  }
  list._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);
  };
  list.addEventListener('pointerdown', list._mdsPointerDown);
}

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" id="mds-zone-' +
    event.id +
    '" 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');
  for (var z = 0; z < zones.length; z++) {
    (function (zone) {
      var eventId = zone.getAttribute('data-event-id');

      mobiscroll.dropcontainer('#mds-zone-' + eventId, {
        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 to the same event
              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) {
            // Check if already assigned to this event
            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');
        },
      });
    })(zones[z]);
  }

  // Handle attendee removal on chip click
  var chips = document.querySelectorAll('.mds-drop-on-events-attendee-chip');
  for (var c = 0; c < chips.length; c++) {
    chips[c].addEventListener('click', function (e) {
      e.stopPropagation();
      var empId = this.getAttribute('data-emp-id');
      var eventEl = this.closest('.mds-drop-on-events-custom-event');
      var evtId = eventEl.getAttribute('data-event-id');

      for (var i = 0; i < meetings.length; i++) {
        if (meetings[i].id === evtId) {
          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;
        }
      }
    });
  }
}

renderEmployeeList();

var calendar = mobiscroll.eventcalendar('#demo-drop-assignee-on-event-from-list', {
  view: {
    timeline: {
      type: 'week',
      startDay: 1,
      endDay: 5,
      startTime: '08:00',
      endTime: '18:00',
      timeCellStep: 60,
      timeLabelStep: 60,
      virtualScroll: false,
    },
  },
  data: meetings,
  resources: rooms,
  dragToCreate: false,
  dragToMove: false,
  dragToResize: false,
  clickToCreate: false,
  eventDelete: false,
  showEventTooltip: false,
  renderTimelineEvent: 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-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 .mbsc-timeline-event {
  min-height: 80px;
}
.mds-drop-on-events .mbsc-schedule-event-inner {
  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);
}
```

## 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-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: [36-Hour Rolling Window Schedule](https://demo.mobiscroll.com/javascript/timeline/36-hour-rolling-window-aircraft-view.md) - Build a fleet scheduling view on the Javascript Timeline — a 36-hour rolling window that auto-advances from the current hour.
- Next: [Transport Management](https://demo.mobiscroll.com/javascript/timeline/truck-transport-planning-and-dispatch.md) - Build Javascript Schedule views with external drag & drop of planned/unscheduled jobs, filtering and real-time validation.