feat(week-view): add hourDuration option

martinsware · mattlewis92 · commit 6a72448b43f7 · 2020-05-03T15:49:37.000+01:00
Closes #1080
diff --git a/projects/angular-calendar/src/modules/common/util.ts b/projects/angular-calendar/src/modules/common/util.ts
@@ -60,34 +60,39 @@ const MINUTES_IN_HOUR = 60;
 
 function getPixelAmountInMinutes(
   hourSegments: number,
-  hourSegmentHeight: number
+  hourSegmentHeight: number,
+  hourDuration?: number
 ) {
-  return MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight);
+  return (hourDuration || MINUTES_IN_HOUR) / (hourSegments * hourSegmentHeight);
 }
 
 export function getMinutesMoved(
   movedY: number,
   hourSegments: number,
   hourSegmentHeight: number,
-  eventSnapSize: number
+  eventSnapSize: number,
+  hourDuration?: number
 ): number {
   const draggedInPixelsSnapSize = roundToNearest(
     movedY,
     eventSnapSize || hourSegmentHeight
   );
   const pixelAmountInMinutes = getPixelAmountInMinutes(
     hourSegments,
-    hourSegmentHeight
+    hourSegmentHeight,
+    hourDuration
   );
   return draggedInPixelsSnapSize * pixelAmountInMinutes;
 }
 
 export function getMinimumEventHeightInMinutes(
   hourSegments: number,
-  hourSegmentHeight: number
+  hourSegmentHeight: number,
+  hourDuration?: number
 ) {
   return (
-    getPixelAmountInMinutes(hourSegments, hourSegmentHeight) * hourSegmentHeight
+    getPixelAmountInMinutes(hourSegments, hourSegmentHeight, hourDuration) *
+    hourSegmentHeight
   );
 }
 
diff --git a/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts b/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts
@@ -32,6 +32,7 @@ export type CalendarDayViewBeforeRenderEvent = CalendarWeekViewBeforeRenderEvent
       [viewDate]="viewDate"
       [events]="events"
       [hourSegments]="hourSegments"
+      [hourDuration]="hourDuration"
       [hourSegmentHeight]="hourSegmentHeight"
       [dayStartHour]="dayStartHour"
       [dayStartMinute]="dayStartMinute"
@@ -80,6 +81,11 @@ export class CalendarDayViewComponent {
    */
   @Input() hourSegmentHeight: number = 30;
 
+  /**
+   * The duration of each segment group in minutes
+   */
+  @Input() hourDuration: number;
+
   /**
    * The day start hours in 24 hour time. Must be 0-23
    */
diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view-current-time-marker.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view-current-time-marker.component.ts
@@ -57,6 +57,8 @@ export class CalendarWeekViewCurrentTimeMarkerComponent implements OnChanges {
 
   @Input() hourSegments: number;
 
+  @Input() hourDuration: number;
+
   @Input() hourSegmentHeight: number;
 
   @Input() customTemplate: TemplateRef<any>;
@@ -80,7 +82,8 @@ export class CalendarWeekViewCurrentTimeMarkerComponent implements OnChanges {
         this.dayEndMinute
       );
       const hourHeightModifier =
-        (this.hourSegments * this.hourSegmentHeight) / 60;
+        (this.hourSegments * this.hourSegmentHeight) /
+        (this.hourDuration || 60);
       const now = new Date();
       return {
         isVisible:
diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts
@@ -249,6 +249,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               [dayEndHour]="dayEndHour"
               [dayEndMinute]="dayEndMinute"
               [hourSegments]="hourSegments"
+              [hourDuration]="hourDuration"
               [hourSegmentHeight]="hourSegmentHeight"
               [customTemplate]="currentTimeMarkerTemplate"
             ></mwl-calendar-week-view-current-time-marker>
@@ -497,6 +498,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() hourSegments: number = 2;
 
+  /**
+   * The duration of each segment group in minutes
+   */
+  @Input() hourDuration: number;
+
   /**
    * The height in pixels of each hour segment
    */
@@ -742,6 +748,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       changes.dayEndHour ||
       changes.dayEndMinute ||
       changes.hourSegments ||
+      changes.hourDuration ||
       changes.weekStartsOn ||
       changes.weekendDays ||
       changes.excludeDays ||
@@ -1130,6 +1137,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       precision: this.precision,
       absolutePositionedEvents: true,
       hourSegments: this.hourSegments,
+      hourDuration: this.hourDuration,
       dayStart: {
         hour: this.dayStartHour,
         minute: this.dayStartMinute,
@@ -1162,7 +1170,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
           dragEndEvent.y,
           this.hourSegments,
           this.hourSegmentHeight,
-          this.eventSnapSize
+          this.eventSnapSize,
+          this.hourDuration
         )
       : 0;
 
@@ -1241,7 +1250,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   ) {
     const minimumEventHeight = getMinimumEventHeightInMinutes(
       this.hourSegments,
-      this.hourSegmentHeight
+      this.hourSegmentHeight,
+      this.hourDuration
     );
     const newEventDates = {
       start: calendarEvent.start,
@@ -1301,7 +1311,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
         resizeEvent.edges.top as number,
         this.hourSegments,
         this.hourSegmentHeight,
-        this.eventSnapSize
+        this.eventSnapSize,
+        this.hourDuration
       );
       const newStart = this.dateAdapter.addMinutes(
         newEventDates.start,
@@ -1317,7 +1328,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
         resizeEvent.edges.bottom as number,
         this.hourSegments,
         this.hourSegmentHeight,
-        this.eventSnapSize
+        this.eventSnapSize,
+        this.hourDuration
       );
       const newEnd = this.dateAdapter.addMinutes(
         newEventDates.end,
diff --git a/projects/angular-calendar/test/calendar-week-view.component.spec.ts b/projects/angular-calendar/test/calendar-week-view.component.spec.ts
@@ -2228,6 +2228,79 @@ describe('calendarWeekView component', () => {
     });
   });
 
+  it('should drag time events to different days and columns while snapping to a grid and excluding weekends with custom hour duration', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(
+      CalendarWeekViewComponent
+    );
+    fixture.componentInstance.viewDate = new Date('2019-03-01');
+    fixture.componentInstance.excludeDays = [0, 6];
+    fixture.componentInstance.daysInWeek = 4;
+    fixture.componentInstance.events = [
+      {
+        start: moment(new Date('2019-03-01'))
+          .startOf('day')
+          .add(4, 'hours')
+          .toDate(),
+        end: moment(new Date('2019-03-01'))
+          .startOf('day')
+          .add(18, 'hours')
+          .toDate(),
+        title: 'foo',
+        draggable: true
+      }
+    ];
+    fixture.componentInstance.hourDuration = 40;
+    fixture.componentInstance.ngOnChanges({
+      viewDate: {},
+      events: {},
+      excludeDays: {},
+      daysInWeek: {},
+      hourColumns: {}
+    });
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const events = fixture.nativeElement.querySelectorAll(
+      '.cal-event-container'
+    );
+    const dayWidth: number = events[0].parentElement.offsetWidth;
+    const rect1: ClientRect = events[0].getBoundingClientRect();
+    let dragEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.pipe(take(1)).subscribe(e => {
+      dragEvent = e;
+    });
+    triggerDomEvent('mousedown', events[0], {
+      clientX: rect1.right,
+      clientY: rect1.bottom,
+      button: 0
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', events[0], {
+      clientX: rect1.right + dayWidth - 5,
+      clientY: rect1.bottom + 95
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mouseup', events[0], {
+      clientX: rect1.right + dayWidth - 5,
+      clientY: rect1.bottom + 95,
+      button: 0
+    });
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(dragEvent).to.deep.equal({
+      type: 'drag',
+      allDay: false,
+      event: fixture.componentInstance.events[0],
+      newStart: moment(fixture.componentInstance.events[0].start)
+        .add(3, 'days')
+        .add(1, 'hour')
+        .toDate(),
+      newEnd: moment(fixture.componentInstance.events[0].end)
+        .add(3, 'days')
+        .add(1, 'hour')
+        .toDate()
+    });
+  });
+
   it('should preserve css classes on hour segments when dragging an event', () => {
     const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(
       CalendarWeekViewComponent
@@ -2351,6 +2424,74 @@ describe('calendarWeekView component', () => {
     });
   });
 
+  it('should resize a time event to the minimum height with custom hour duration', () => {
+    const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(
+      CalendarWeekViewComponent
+    );
+    fixture.componentInstance.viewDate = new Date('2018-07-29');
+    fixture.componentInstance.events = [
+      {
+        start: moment(new Date('2018-07-29'))
+          .startOf('day')
+          .add(4, 'hours')
+          .toDate(),
+        end: moment(new Date('2018-07-29'))
+          .startOf('day')
+          .add(6, 'hours')
+          .toDate(),
+        title: 'foo',
+        resizable: {
+          afterEnd: true
+        }
+      }
+    ];
+    fixture.componentInstance.hourDuration = 40;
+    fixture.componentInstance.hourSegmentHeight = 20;
+    fixture.componentInstance.ngOnChanges({
+      viewDate: {},
+      events: {},
+      hourDuration: {},
+      hourSegmentHeight: {}
+    });
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const event: HTMLElement = fixture.nativeElement.querySelectorAll(
+      '.cal-event-container'
+    )[0];
+    const rect: ClientRect = event.getBoundingClientRect();
+    const resizeHandle = event.querySelector('.cal-resize-handle-after-end');
+    let resizeEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.pipe(take(1)).subscribe(e => {
+      resizeEvent = e;
+    });
+    triggerDomEvent('mousedown', resizeHandle, {
+      clientX: rect.right,
+      clientY: rect.bottom,
+      button: 0
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {
+      clientX: rect.right,
+      clientY: rect.bottom - 120
+    });
+    fixture.detectChanges();
+    expect(event.getBoundingClientRect().height).to.equal(20);
+    triggerDomEvent('mouseup', document.body, {
+      clientX: rect.right,
+      clientY: rect.bottom - 120,
+      button: 0
+    });
+    fixture.detectChanges();
+    expect(resizeEvent).to.deep.equal({
+      type: 'resize',
+      event: fixture.componentInstance.events[0],
+      newStart: fixture.componentInstance.events[0].start,
+      newEnd: moment(fixture.componentInstance.events[0].start)
+        .add(20, 'minutes')
+        .toDate()
+    });
+  });
+
   it('should allow css variables for colors', () => {
     const style = document.createElement('style');
     style.setAttribute('type', 'text/css');
diff --git a/projects/demos/app/demo-app.module.ts b/projects/demos/app/demo-app.module.ts
@@ -140,6 +140,16 @@ import { ClipboardModule } from 'ngx-clipboard';
             label: 'Clickable times',
           },
         },
+        {
+          path: 'custom-hour-duration',
+          loadChildren: () =>
+            import('./demo-modules/custom-hour-duration/module').then(
+              (m) => m.DemoModule
+            ),
+          data: {
+            label: 'Custom hour duration',
+          },
+        },
         {
           path: 'day-view-start-end',
           loadChildren: () =>
diff --git a/projects/demos/app/demo-modules/custom-hour-duration/component.ts b/projects/demos/app/demo-modules/custom-hour-duration/component.ts
@@ -0,0 +1,43 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { setMinutes, setHours } from 'date-fns';
+import { Subject } from 'rxjs';
+import {
+  CalendarEvent,
+  CalendarEventTimesChangedEvent,
+  CalendarView,
+} from 'angular-calendar';
+
+@Component({
+  selector: 'mwl-demo-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'template.html',
+})
+export class DemoComponent {
+  view: CalendarView = CalendarView.Week;
+
+  viewDate = new Date();
+
+  events: CalendarEvent[] = [
+    {
+      start: setHours(setMinutes(new Date(), 20), 15),
+      end: setHours(setMinutes(new Date(), 40), 17),
+      title: 'An event',
+      resizable: {
+        afterEnd: true,
+      },
+      draggable: true,
+    },
+  ];
+
+  refresh = new Subject();
+
+  eventTimesChanged({
+    event,
+    newStart,
+    newEnd,
+  }: CalendarEventTimesChangedEvent): void {
+    event.start = newStart;
+    event.end = newEnd;
+    this.refresh.next();
+  }
+}
diff --git a/projects/demos/app/demo-modules/custom-hour-duration/module.ts b/projects/demos/app/demo-modules/custom-hour-duration/module.ts
diff --git a/projects/demos/app/demo-modules/custom-hour-duration/sources.ts b/projects/demos/app/demo-modules/custom-hour-duration/sources.ts
diff --git a/projects/demos/app/demo-modules/custom-hour-duration/template.html b/projects/demos/app/demo-modules/custom-hour-duration/template.html
