fix(monthView): preserve classes when removing a days cssClass

Closes #210
mattlewis92 · May 18, 2017 · a7c902d · a7c902d
1 parent 36346a8
commit a7c902d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/src/components/month/calendarMonthCell.component.ts b/src/components/month/calendarMonthCell.component.ts
@@ -40,7 +40,7 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
     </ng-template>
   `,
   host: {
-    '[class]': '"cal-cell cal-day-cell " + day?.cssClass',
+    'class': 'cal-cell cal-day-cell',
     '[class.cal-past]': 'day.isPast',
     '[class.cal-today]': 'day.isToday',
     '[class.cal-future]': 'day.isFuture',

diff --git a/src/components/month/calendarMonthView.component.ts b/src/components/month/calendarMonthView.component.ts
@@ -56,6 +56,7 @@ import { CalendarUtils } from '../../providers/calendarUtils.provider';
             <mwl-calendar-month-cell
               *ngFor="let day of view.days | slice : rowIndex : rowIndex + (view.totalDaysVisibleInWeek)"
               [class.cal-drag-over]="day.dragOver"
+              [ngClass]="day?.cssClass"
               [day]="day"
               [openDay]="openDay"
               [locale]="locale"

diff --git a/test/calendarMonthView.component.spec.ts b/test/calendarMonthView.component.spec.ts
@@ -13,7 +13,8 @@ import {
   CalendarMomentDateFormatter,
   CalendarDateFormatter,
   CalendarModule,
-  MOMENT
+  MOMENT,
+  CalendarMonthViewDay
 } from './../src';
 import { CalendarMonthViewComponent } from './../src/components/month/calendarMonthView.component';
 import { Subject } from 'rxjs/Subject';
@@ -127,6 +128,28 @@ describe('calendarMonthView component', () => {
     fixture.destroy();
   });
 
+  it('should not remove other classes when removing the cssClass', () => {
+    const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    let firstDay: CalendarMonthViewDay;
+    fixture.componentInstance.dayModifier = (day) => {
+      if (!firstDay) {
+        firstDay = day;
+        day.cssClass = 'foo';
+      }
+    };
+    fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
+    fixture.detectChanges();
+    const cell: HTMLElement = fixture.nativeElement.querySelector('.cal-days .cal-cell');
+    expect(cell.classList.contains('foo')).to.equal(true);
+    expect(cell.classList.contains('cal-out-month')).to.equal(true);
+    delete firstDay.cssClass;
+    fixture.detectChanges();
+    expect(cell.classList.contains('foo')).to.equal(false);
+    expect(cell.classList.contains('cal-out-month')).to.equal(true);
+    fixture.destroy();
+  });
+
   it('should add the highlight class to events on mouse over', () => {
     const fixture: ComponentFixture<CalendarMonthViewComponent> = TestBed.createComponent(CalendarMonthViewComponent);
     fixture.componentInstance.viewDate = new Date('2016-06-27');