fix(dayView): add the event.cssClass to the event container instead o…

…f the event itself

BREAKING CHANGE: the `event.cssClass` property is now added to the parent container element, rather
than the event itself. You may need to update your CSS.

Before:
```
.my-custom-event-class {}
```

After:
```
.my-custom-event-class .cal-event {}
```

People using custom day event event templates can also remove these lines from their template:

```
[class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
[class.cal-ends-within-day]="!dayEvent.endsAfterDay"
[ngClass]="dayEvent.event.cssClass"
```

Closes #299

scss/day-view.scss

@@ -63,12 +63,12 @@
     cursor: move;
   }
 
-  .cal-event.cal-starts-within-day {
+  .cal-starts-within-day .cal-event {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
   }
 
-  .cal-event.cal-ends-within-day {
+  .cal-ends-within-day .cal-event {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
   }

src/components/day/calendarDayView.component.ts

@@ -73,6 +73,9 @@ export interface DayViewEventResize {
             *ngFor="let dayEvent of view?.events"
             class="cal-event-container"
             [class.cal-draggable]="dayEvent.event.draggable"
+            [class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
+            [class.cal-ends-within-day]="!dayEvent.endsAfterDay"
+            [ngClass]="dayEvent.event.cssClass"
             mwlResizable
             [resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"
             [resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"

src/components/day/calendarDayViewEvent.component.ts

@@ -15,9 +15,6 @@ import { DayViewEvent } from 'calendar-utils';
         class="cal-event"
         [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"
         [tooltipEvent]="dayEvent.event"

test/calendarDayView.component.spec.ts

@@ -148,7 +148,7 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     expect(
       fixture.nativeElement
-        .querySelector('.cal-event')
+        .querySelector('.cal-event-container')
         .classList.contains('foo')
     ).to.equal(true);
     fixture.destroy();