refactor(dayView): move events into a container element

Author: Matt Lewis

scss/day-view.scss

@@ -41,14 +41,18 @@
     background-color: #ededed;
   }
 
-  .cal-event {
+  .cal-event-container {
     position: absolute;
+  }
+
+  .cal-event {
     border: solid 1px;
     padding: 5px;
     font-size: 12px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    height: 100%;
   }
 
   .cal-draggable {

src/components/day/calendarDayView.component.ts

@@ -58,6 +58,8 @@ const SEGMENT_HEIGHT: number = 30;
           <div
             #event
             *ngFor="let dayEvent of view?.events"
+            class="cal-event-container"
+            [class.cal-draggable]="dayEvent.event.draggable"
             mwlResizable
             [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"
             [resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"
@@ -71,25 +73,26 @@ const SEGMENT_HEIGHT: number = 30;
             [validateDrag]="validateDrag"
             (dragStart)="dragStart(event, dayViewContainer)"
             (dragEnd)="eventDragged(dayEvent, $event.y)"
-            class="cal-event"
             [style.marginTop.px]="dayEvent.top"
-            [style.marginLeft.px]="dayEvent.left + 70"
-            [style.height.px]="dayEvent.height"
-            [style.width.px]="dayEvent.width - 1"
-            [style.backgroundColor]="dayEvent.event.color.secondary"
-            [style.borderColor]="dayEvent.event.color.primary"
-            [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
-            [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
-            [class.cal-draggable]="dayEvent.event.draggable"
-            [ngClass]="dayEvent.event.cssClass"
-            [mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
-            [tooltipPlacement]="tooltipPlacement">
-            <mwl-calendar-event-title
-              [event]="dayEvent.event"
-              view="day"
-              (click)="eventClicked.emit({event: dayEvent.event})">
-            </mwl-calendar-event-title>
-            <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
+            [style.height.px]="dayEvent.height">
+            <div
+              class="cal-event"
+              [style.marginLeft.px]="dayEvent.left + 70"
+              [style.width.px]="dayEvent.width - 1"
+              [style.backgroundColor]="dayEvent.event.color.secondary"
+              [style.borderColor]="dayEvent.event.color.primary"
+              [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
+              [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
+              [ngClass]="dayEvent.event.cssClass"
+              [mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
+              [tooltipPlacement]="tooltipPlacement">
+              <mwl-calendar-event-title
+                [event]="dayEvent.event"
+                view="day"
+                (click)="eventClicked.emit({event: dayEvent.event})">
+              </mwl-calendar-event-title>
+              <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
+            </div>
           </div>
         </div>
         <div class="cal-hour" *ngFor="let hour of hours" [style.minWidth.px]="view?.width + 70">

test/calendarDayView.component.spec.ts

@@ -274,8 +274,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
-    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
-    event.style.position = 'absolute';
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
     const rect: ClientRect = event.getBoundingClientRect();
     let resizeEvent: CalendarEventTimesChangedEvent;
     fixture.componentInstance.eventTimesChanged.subscribe(event => {
@@ -312,8 +311,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
-    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
-    event.style.position = 'absolute';
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
     const rect: ClientRect = event.getBoundingClientRect();
     let resizeEvent: CalendarEventTimesChangedEvent;
     fixture.componentInstance.eventTimesChanged.subscribe(event => {
@@ -324,7 +322,7 @@ describe('CalendarDayViewComponent component', () => {
     triggerDomEvent('mousemove', document.body, {clientY: rect.bottom + 30, clientX: rect.left + 10});
     fixture.detectChanges();
     expect(event.getBoundingClientRect().bottom).to.equal(rect.bottom + 30);
-    expect(event.getBoundingClientRect().height).to.equal(162);
+    expect(event.getBoundingClientRect().height).to.equal(150);
     triggerDomEvent('mouseup', document.body, {clientY: rect.top + 30, clientX: rect.left + 10});
     fixture.detectChanges();
     fixture.destroy();
@@ -470,8 +468,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
-    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event');
-    event.style.position = 'absolute';
+    const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
     const rect: ClientRect = event.getBoundingClientRect();
     triggerDomEvent('mousedown', document.body, {clientY: rect.top, clientX: rect.left + 10});
     fixture.detectChanges();