fix(dayView): fix resizing of events

Author: Matt Lewis

scss/day-view.scss

@@ -46,7 +46,6 @@
   }
 
   .cal-event {
-    position: absolute;
     border: solid 1px;
     padding: 5px;
     font-size: 12px;

src/components/day/calendarDayView.component.ts

@@ -74,7 +74,9 @@ const SEGMENT_HEIGHT: number = 30;
             (dragStart)="dragStart(event, dayViewContainer)"
             (dragEnd)="eventDragged(dayEvent, $event.y)"
             [style.marginTop.px]="dayEvent.top"
-            [style.height.px]="dayEvent.height">
+            [style.height.px]="dayEvent.height"
+            [style.marginLeft.px]="dayEvent.left + 70"
+            [style.width.px]="dayEvent.width - 1">
             <mwl-calendar-day-view-event
               [dayEvent]="dayEvent"
               [tooltipPlacement]="tooltipPlacement"

src/components/day/calendarDayViewEvent.component.ts

@@ -7,8 +7,6 @@ import { DayViewEvent } from 'calendar-utils';
     <ng-template #defaultTemplate>
       <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"

test/calendarDayView.component.spec.ts

@@ -243,7 +243,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.componentInstance.eventWidth = 300;
     fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}, eventWidth: {}});
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('.cal-event').style.width).to.equal('299px');
+    expect(fixture.nativeElement.querySelector('.cal-event-container').style.width).to.equal('299px');
     fixture.destroy();
   });
 
@@ -275,7 +275,6 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
-    event.querySelector('.cal-event')['style'].position = 'inherit'; // hacky fix
     const rect: ClientRect = event.getBoundingClientRect();
     let resizeEvent: CalendarEventTimesChangedEvent;
     fixture.componentInstance.eventTimesChanged.subscribe(event => {
@@ -313,7 +312,6 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
-    event.querySelector('.cal-event')['style'].position = 'inherit'; // hacky fix
     const rect: ClientRect = event.getBoundingClientRect();
     let resizeEvent: CalendarEventTimesChangedEvent;
     fixture.componentInstance.eventTimesChanged.subscribe(event => {
@@ -471,7 +469,6 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     document.body.appendChild(fixture.nativeElement);
     const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container');
-    event.querySelector('.cal-event')['style'].position = 'inherit'; // hacky fix
     const rect: ClientRect = event.getBoundingClientRect();
     triggerDomEvent('mousedown', document.body, {clientY: rect.top, clientX: rect.left + 10});
     fixture.detectChanges();