Skip to content

Commit 591dd4a

Browse files
author
Matt Lewis
committed
fix(dayView): add the event.cssClass to the event container instead of 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
1 parent 4a33dfb commit 591dd4a

4 files changed

+6
-6
lines changed

scss/day-view.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@
6363
cursor: move;
6464
}
6565

66-
.cal-event.cal-starts-within-day {
66+
.cal-starts-within-day .cal-event {
6767
border-top-left-radius: 5px;
6868
border-top-right-radius: 5px;
6969
}
7070

71-
.cal-event.cal-ends-within-day {
71+
.cal-ends-within-day .cal-event {
7272
border-bottom-left-radius: 5px;
7373
border-bottom-right-radius: 5px;
7474
}

src/components/day/calendarDayView.component.ts

+3
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ export interface DayViewEventResize {
7373
*ngFor="let dayEvent of view?.events"
7474
class="cal-event-container"
7575
[class.cal-draggable]="dayEvent.event.draggable"
76+
[class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
77+
[class.cal-ends-within-day]="!dayEvent.endsAfterDay"
78+
[ngClass]="dayEvent.event.cssClass"
7679
mwlResizable
7780
[resizeEdges]="{top: dayEvent.event?.resizable?.beforeStart, bottom: dayEvent.event?.resizable?.afterEnd}"
7881
[resizeSnapGrid]="{top: eventSnapSize, bottom: eventSnapSize}"

src/components/day/calendarDayViewEvent.component.ts

-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@ import { DayViewEvent } from 'calendar-utils';
1515
class="cal-event"
1616
[style.backgroundColor]="dayEvent.event.color.secondary"
1717
[style.borderColor]="dayEvent.event.color.primary"
18-
[class.cal-starts-within-day]="!dayEvent.startsBeforeDay"
19-
[class.cal-ends-within-day]="!dayEvent.endsAfterDay"
20-
[ngClass]="dayEvent.event.cssClass"
2118
[mwlCalendarTooltip]="dayEvent.event.title | calendarEventTitle:'dayTooltip':dayEvent.event"
2219
[tooltipPlacement]="tooltipPlacement"
2320
[tooltipEvent]="dayEvent.event"

test/calendarDayView.component.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ describe('CalendarDayViewComponent component', () => {
148148
fixture.detectChanges();
149149
expect(
150150
fixture.nativeElement
151-
.querySelector('.cal-event')
151+
.querySelector('.cal-event-container')
152152
.classList.contains('foo')
153153
).to.equal(true);
154154
fixture.destroy();

0 commit comments

Comments
 (0)