fix(month-view): prevent day clicked from firing when dragging events

BREAKING CHANGE:

Custom template users will now need to add a "dragActiveClass='cal-drag-active'" anywhere they use an mwlDraggable directive

If using the mwlDraggable directive anywhere else in your app you will need to apply `pointer-events: none` to the element yourself when it's being dragged. This can be done with the `dragActiveClass` option

Fixes #487

Author: mattlewis92

package-lock.json

@@ -163,7 +163,7 @@
     "@angular/core": ">=6.0.0 <8.0.0"
   },
   "dependencies": {
-    "angular-draggable-droppable": "^4.0.0-beta.4",
+    "angular-draggable-droppable": "^4.0.0-beta.5",
     "angular-resizable-element": "^3.0.0",
     "calendar-utils": "^0.2.0-alpha.6",
     "positioning": "^1.3.1"

package.json

@@ -95,6 +95,7 @@ export interface DayViewEventResize {
             (resizing)="resizing(dayEvent, $event)"
             (resizeEnd)="resizeEnded(dayEvent)"
             mwlDraggable
+            dragActiveClass="cal-drag-active"
             [dropData]="{event: dayEvent.event, isInternal: true}"
             [dragAxis]="{x: !snapDraggedEvents && dayEvent.event.draggable && currentResizes.size === 0, y: dayEvent.event.draggable && currentResizes.size === 0}"
             [dragSnapGrid]="snapDraggedEvents ? {y: eventSnapSize} : {}"

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

@@ -90,4 +90,8 @@
     padding: 8px;
     border: solid 1px;
   }
+
+  .cal-drag-active * {
+    pointer-events: none;
+  }
 }

src/modules/day/calendar-day-view.scss

@@ -344,6 +344,7 @@ export class CalendarMonthViewComponent
    * @hidden
    */
   handleDayClick(clickEvent: any, day: MonthViewDay) {
+    console.log('clicked', clickEvent.target);
     // when using hammerjs, stopPropagation doesn't work. See https://github.com/mattlewis92/angular-calendar/issues/318
     if (!clickEvent.target.classList.contains('cal-event')) {
       this.dayClicked.emit({ day });

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

@@ -149,4 +149,8 @@
       opacity: 0.3;
     }
   }
+
+  .cal-drag-active * {
+    pointer-events: none;
+  }
 }

src/modules/month/calendar-month-view.scss

@@ -20,6 +20,7 @@ import { trackByEventId } from '../common/util';
         *ngFor="let event of events; trackBy:trackByEventId"
         [ngClass]="event?.cssClass"
         mwlDraggable
+        dragActiveClass="cal-drag-active"
         [dropData]="{event: event}"
         [dragAxis]="{x: event.draggable, y: event.draggable}">
         <span

src/modules/month/calendar-open-day-events.component.ts

@@ -78,6 +78,7 @@ export interface CalendarWeekViewBeforeRenderEvent {
           (resizing)="resizing(weekEvent, $event, dayColumnWidth)"
           (resizeEnd)="resizeEnded(weekEvent)"
           mwlDraggable
+          dragActiveClass="cal-drag-active"
           [dragAxis]="{x: weekEvent.event.draggable && currentResizes.size === 0, y: false}"
           [dragSnapGrid]="{x: dayColumnWidth}"
           [validateDrag]="validateDrag"

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

@@ -81,4 +81,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .cal-drag-active * {
+    pointer-events: none;
+  }
 }