fix: more robust way of telling if an event is dropped within a calendar

Fixes #637

Author: mattlewis92

src/modules/common/util.ts

@@ -123,15 +123,15 @@ export function isDraggedWithinPeriod(
 }
 
 export function shouldFireDroppedEvent(
-  dropEvent: { dropData?: { event?: CalendarEvent } },
+  dropEvent: { dropData?: { event?: CalendarEvent; calendarId?: symbol } },
   date: Date,
   allDay: boolean,
-  events: CalendarEvent[]
+  calendarId: symbol
 ) {
   return (
     dropEvent.dropData &&
     dropEvent.dropData.event &&
-    (events.indexOf(dropEvent.dropData.event) === -1 ||
+    (dropEvent.dropData.calendarId !== calendarId ||
       (dropEvent.dropData.event.allDay && !allDay) ||
       (!dropEvent.dropData.event.allDay && allDay))
   );

src/modules/day/calendar-day-view.component.ts

@@ -95,7 +95,7 @@ export interface DayViewEventResize {
           [class.cal-draggable]="!snapDraggedEvents && event.draggable"
           mwlDraggable
           dragActiveClass="cal-drag-active"
-          [dropData]="{event: event}"
+          [dropData]="{event: event, calendarId: calendarId}"
           [dragAxis]="{x: !snapDraggedEvents && event.draggable, y: !snapDraggedEvents && event.draggable}">
         </mwl-calendar-day-view-event>
       </div>
@@ -122,7 +122,7 @@ export interface DayViewEventResize {
             (resizeEnd)="resizeEnded(dayEvent)"
             mwlDraggable
             dragActiveClass="cal-drag-active"
-            [dropData]="{event: dayEvent.event}"
+            [dropData]="{event: dayEvent.event, calendarId: calendarId}"
             [dragAxis]="{x: !snapDraggedEvents && dayEvent.event.draggable && currentResizes.size === 0, y: dayEvent.event.draggable && currentResizes.size === 0}"
             [dragSnapGrid]="snapDraggedEvents ? {y: eventSnapSize || hourSegmentHeight} : {}"
             [validateDrag]="snapDraggedEvents ? validateDrag : false"
@@ -356,6 +356,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   eventDragEnter = 0;
 
+  /**
+   * @hidden
+   */
+  calendarId = Symbol('angular calendar day view id');
+
   /**
    * @hidden
    */
@@ -452,11 +457,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   eventDropped(
-    dropEvent: { dropData?: { event?: CalendarEvent } },
+    dropEvent: { dropData?: { event?: CalendarEvent; calendarId?: symbol } },
     date: Date,
     allDay: boolean
   ): void {
-    if (shouldFireDroppedEvent(dropEvent, date, allDay, this.events)) {
+    if (shouldFireDroppedEvent(dropEvent, date, allDay, this.calendarId)) {
       this.eventTimesChanged.emit({
         type: CalendarEventTimesChangedEventType.Drop,
         event: dropEvent.dropData.event,

src/modules/week/calendar-week-view.component.ts

@@ -128,7 +128,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
             (resizeEnd)="allDayEventResizeEnded(allDayEvent)"
             mwlDraggable
             dragActiveClass="cal-drag-active"
-            [dropData]="{event: allDayEvent.event}"
+            [dropData]="{event: allDayEvent.event, calendarId: calendarId}"
             [dragAxis]="{
               x: allDayEvent.event.draggable && allDayEventResizes.size === 0,
               y: !snapDraggedEvents && allDayEvent.event.draggable && allDayEventResizes.size === 0
@@ -212,7 +212,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               (resizeEnd)="timeEventResizeEnded(timeEvent)"
               mwlDraggable
               dragActiveClass="cal-drag-active"
-              [dropData]="{event: timeEvent.event}"
+              [dropData]="{event: timeEvent.event, calendarId: calendarId}"
               [dragAxis]="{
                 x: timeEvent.event.draggable && timeEventResizes.size === 0,
                 y: timeEvent.event.draggable && timeEventResizes.size === 0
@@ -528,6 +528,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   dayColumnWidth: number;
 
+  /**
+   * @hidden
+   */
+  calendarId = Symbol('angular calendar week view id');
+
   /**
    * @hidden
    */
@@ -780,11 +785,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    * @hidden
    */
   eventDropped(
-    dropEvent: DropEvent<{ event?: CalendarEvent }>,
+    dropEvent: DropEvent<{ event?: CalendarEvent; calendarId?: symbol }>,
     date: Date,
     allDay: boolean
   ): void {
-    if (shouldFireDroppedEvent(dropEvent, date, allDay, this.events)) {
+    if (shouldFireDroppedEvent(dropEvent, date, allDay, this.calendarId)) {
       this.eventTimesChanged.emit({
         type: CalendarEventTimesChangedEventType.Drop,
         event: dropEvent.dropData.event,