fix: allow events that end on different days to be dragged

Author: mattlewis92

src/modules/common/util.ts

@@ -4,6 +4,7 @@ import {
   DayViewHour,
   DayViewHourSegment,
   validateEvents as validateEventsWithoutLog,
+  ViewPeriod,
   WeekDay,
   WeekViewAllDayEvent
 } from 'calendar-utils';
@@ -108,3 +109,15 @@ export function addDaysWithExclusions(
   }
   return result;
 }
+
+export function isDraggedWithinPeriod(
+  newStart: Date,
+  newEnd: Date,
+  period: ViewPeriod
+): boolean {
+  const end = newEnd || newStart;
+  return (
+    (period.start <= newStart && newStart <= period.end) ||
+    (period.start <= end && end <= period.end)
+  );
+}

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

@@ -37,7 +37,8 @@ import {
   getMinutesMoved,
   getDefaultEventEnd,
   getMinimumEventHeightInMinutes,
-  trackByDayOrWeekEvent
+  trackByDayOrWeekEvent,
+  isDraggedWithinPeriod
 } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
 import { DragEndEvent } from 'angular-draggable-droppable';
@@ -521,24 +522,28 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
 
   dragEnded(dayEvent: DayViewEvent, dragEndEvent: DragEndEvent): void {
     if (this.eventDragEnter > 0) {
-      const minutesMoved = getMinutesMoved(
+      let minutesMoved = getMinutesMoved(
         dragEndEvent.y,
         this.hourSegments,
         this.hourSegmentHeight,
         this.eventSnapSize
       );
-      const newStart: Date = this.dateAdapter.addMinutes(
+      let newStart: Date = this.dateAdapter.addMinutes(
         dayEvent.event.start,
         minutesMoved
       );
+      if (dragEndEvent.y < 0 && newStart < this.view.period.start) {
+        minutesMoved += this.dateAdapter.differenceInMinutes(
+          this.view.period.start,
+          newStart
+        );
+        newStart = this.view.period.start;
+      }
       let newEnd: Date;
       if (dayEvent.event.end) {
         newEnd = this.dateAdapter.addMinutes(dayEvent.event.end, minutesMoved);
       }
-      if (
-        newStart >= this.view.period.start &&
-        (newEnd || newStart) <= this.view.period.end
-      ) {
+      if (isDraggedWithinPeriod(newStart, newEnd, this.view.period)) {
         this.eventTimesChanged.emit({
           newStart,
           newEnd,

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

@@ -42,7 +42,8 @@ import {
   getDefaultEventEnd,
   getMinimumEventHeightInMinutes,
   addDaysWithExclusions,
-  trackByDayOrWeekEvent
+  trackByDayOrWeekEvent,
+  isDraggedWithinPeriod
 } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
 import {
@@ -862,8 +863,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
     );
     if (
       this.eventDragEnter > 0 &&
-      start >= this.view.period.start &&
-      (end || start) <= this.view.period.end
+      isDraggedWithinPeriod(start, end, this.view.period)
     ) {
       this.eventTimesChanged.emit({
         newStart: start,

test/calendar-day-view.component.spec.ts

@@ -881,7 +881,18 @@ describe('CalendarDayViewComponent component', () => {
       clientX: eventPosition.left + 10
     });
     fixture.detectChanges();
-    expect(eventDropped).not.to.have.been.called;
+    const { newStart, newEnd } = eventDropped.getCall(0).args[0];
+    expect(newStart).to.deep.equal(
+      moment('2016-06-27')
+        .startOf('day')
+        .toDate()
+    );
+    expect(newEnd).to.deep.equal(
+      moment('2016-06-27')
+        .startOf('day')
+        .add(2, 'hours')
+        .toDate()
+    );
     fixture.destroy();
   });