fix(weekView): custom event cssClass's are now added to the event container instead of the event i

BREAKING CHANGE: you may need to adjust your CSS slightly to account for this change. See the day
view breaking change for how to migrate.

Author: Matt Lewis

scss/week-view.scss

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

src/components/week/calendarWeekView.component.ts

@@ -55,10 +55,13 @@ export interface WeekViewEventResize {
       </mwl-calendar-week-view-header>
       <div *ngFor="let eventRow of eventRows" #eventRowContainer class="cal-events-row">
         <div
-          class="cal-event-container"
+          *ngFor="let weekEvent of eventRow.row"
           #event
+          class="cal-event-container"
           [class.cal-draggable]="weekEvent.event.draggable"
-          *ngFor="let weekEvent of eventRow.row"
+          [class.cal-starts-within-week]="!weekEvent.startsBeforeWeek"
+          [class.cal-ends-within-week]="!weekEvent.endsAfterWeek"
+          [ngClass]="weekEvent.event?.cssClass"
           [style.width]="((100 / days.length) * weekEvent.span) + '%'"
           [style.marginLeft]="((100 / days.length) * weekEvent.offset) + '%'"
           mwlResizable

src/components/week/calendarWeekViewEvent.component.ts

@@ -13,10 +13,7 @@ import { WeekViewEvent } from 'calendar-utils';
     <ng-template #defaultTemplate>
       <div
         class="cal-event"
-        [class.cal-starts-within-week]="!weekEvent.startsBeforeWeek"
-        [class.cal-ends-within-week]="!weekEvent.endsAfterWeek"
         [style.backgroundColor]="weekEvent.event.color.secondary"
-        [ngClass]="weekEvent.event?.cssClass"
         [mwlCalendarTooltip]="weekEvent.event.title | calendarEventTitle:'weekTooltip':weekEvent.event"
         [tooltipPlacement]="tooltipPlacement"
         [tooltipEvent]="weekEvent.event"

test/calendarWeekView.component.spec.ts

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