feat(day-view): allow the hour segment height to be customised

Closes #360

Author: Matt Lewis

scss/day-view.scss

@@ -22,7 +22,6 @@
   mwl-calendar-day-view-hour-segment, // fix for https://github.com/mattlewis92/angular-calendar/issues/260
   .cal-hour-segment {
     display: block;
-    height: 30px;
   }
 
   .cal-hour-segment::after {

src/components/day/calendar-day-view-hour-segment.component.ts

@@ -10,6 +10,7 @@ import { DayViewHourSegment } from 'calendar-utils';
       let-locale="locale">
       <div
         class="cal-hour-segment"
+        [style.height.px]="segmentHeight"
         [class.cal-hour-start]="segment.isStart"
         [class.cal-after-hour-start]="!segment.isStart"
         [ngClass]="segment.cssClass">
@@ -30,6 +31,8 @@ import { DayViewHourSegment } from 'calendar-utils';
 export class CalendarDayViewHourSegmentComponent {
   @Input() segment: DayViewHourSegment;
 
+  @Input() segmentHeight: number;
+
   @Input() locale: string;
 
   @Input() customTemplate: TemplateRef<any>;

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

@@ -28,11 +28,6 @@ import { CalendarEventTimesChangedEvent } from '../../interfaces/calendar-event-
 import { CalendarUtils } from '../../providers/calendar-utils.provider';
 import { validateEvents } from '../../providers/util';
 
-/**
- * @hidden
- */
-const SEGMENT_HEIGHT: number = 30;
-
 /**
  * @hidden
  */
@@ -109,7 +104,9 @@ export interface DayViewEventResize {
         <div class="cal-hour" *ngFor="let hour of hours" [style.minWidth.px]="view?.width + 70">
           <mwl-calendar-day-view-hour-segment
             *ngFor="let segment of hour.segments"
+            [style.height.px]="hourSegmentHeight"
             [segment]="segment"
+            [segmentHeight]="hourSegmentHeight"
             [locale]="locale"
             [customTemplate]="hourSegmentTemplate"
             (mwlClick)="hourSegmentClicked.emit({date: segment.date})"
@@ -141,6 +138,11 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   @Input() hourSegments: number = 2;
 
+  /**
+   * The height in pixels of each hour segment
+   */
+  @Input() hourSegmentHeight: number = 30;
+
   /**
    * The day start hours in 24 hour time. Must be 0-23
    */
@@ -179,7 +181,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * The grid size to snap resizing and dragging of events to
    */
-  @Input() eventSnapSize: number = 30;
+  @Input() eventSnapSize: number = this.hourSegmentHeight;
 
   /**
    * The placement of the event tooltip
@@ -399,7 +401,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
     dayEvent.height = currentResize.originalHeight;
 
     const pixelAmountInMinutes: number =
-      MINUTES_IN_HOUR / (this.hourSegments * SEGMENT_HEIGHT);
+      MINUTES_IN_HOUR / (this.hourSegments * this.hourSegmentHeight);
     const minutesMoved: number = pixelsMoved * pixelAmountInMinutes;
     let newStart: Date = dayEvent.event.start;
     let newEnd: Date = dayEvent.event.end;
@@ -425,7 +427,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
 
   eventDragged(dayEvent: DayViewEvent, draggedInPixels: number): void {
     const pixelAmountInMinutes: number =
-      MINUTES_IN_HOUR / (this.hourSegments * SEGMENT_HEIGHT);
+      MINUTES_IN_HOUR / (this.hourSegments * this.hourSegmentHeight);
     const minutesMoved: number = draggedInPixels * pixelAmountInMinutes;
     const newStart: Date = addMinutes(dayEvent.event.start, minutesMoved);
     let newEnd: Date;
@@ -467,7 +469,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
         minute: this.dayEndMinute
       },
       eventWidth: this.eventWidth,
-      segmentHeight: SEGMENT_HEIGHT
+      segmentHeight: this.hourSegmentHeight
     });
   }
 

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

@@ -995,4 +995,21 @@ describe('CalendarDayViewComponent component', () => {
     stub.restore();
     expect(stub).to.have.been.calledOnce; // tslint:disable-line
   });
+
+  it('should allow the hour segment height to be customised', () => {
+    const fixture: ComponentFixture<
+      CalendarDayViewComponent
+    > = TestBed.createComponent(CalendarDayViewComponent);
+    fixture.componentInstance.hourSegmentHeight = 45;
+    fixture.componentInstance.viewDate = new Date('2016-06-01');
+    fixture.componentInstance.ngOnChanges({ viewDate: {} });
+    fixture.detectChanges();
+    expect(
+      fixture.nativeElement.querySelector('mwl-calendar-day-view-hour-segment')
+        .style.height
+    ).to.equal('45px');
+    expect(
+      fixture.nativeElement.querySelector('.cal-hour-segment').style.height
+    ).to.equal('45px');
+  });
 });