Skip to content

Commit

Permalink
feat(weekView): allow a custom css class to be added to a column header
Browse files Browse the repository at this point in the history
Closes #222
  • Loading branch information
Matt Lewis committed Jun 25, 2017
1 parent abf02d8 commit 068d08b
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/components/week/calendarWeekView.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
*/
@Output() eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent> = new EventEmitter<CalendarEventTimesChangedEvent>();

/**
* An output that will be called before the view is rendered for the current week.
* If you add the `cssClass` property to a day in the header it will add that class to the cell element in the template
*/
@Output() beforeViewRender: EventEmitter<{header: WeekDay[]}> = new EventEmitter();

/**
* @hidden
*/
Expand Down Expand Up @@ -339,6 +345,9 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
excluded: this.excludeDays,
weekendDays: this.weekendDays
});
this.beforeViewRender.emit({
header: this.days
});
}

private refreshBody(): void {
Expand Down
1 change: 1 addition & 0 deletions src/components/week/calendarWeekViewHeader.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
[class.cal-future]="day.isFuture"
[class.cal-weekend]="day.isWeekend"
[class.cal-drag-over]="day.dragOver"
[ngClass]="day.cssClass"
(mwlClick)="dayClicked.emit({date: day.date})"
mwlDroppable
(dragEnter)="day.dragOver = true"
Expand Down
12 changes: 12 additions & 0 deletions test/calendarWeekView.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -547,4 +547,16 @@ describe('calendarWeekView component', () => {
fixture.destroy();
});

it('should add a custom CSS class to headers via the beforeViewRender output', () => {
const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(CalendarWeekViewComponent);
fixture.componentInstance.viewDate = new Date('2016-06-27');
fixture.componentInstance.beforeViewRender.take(1).subscribe(({header}) => {
header[0].cssClass = 'foo';
});
fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}});
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('.cal-header').classList.contains('foo')).to.equal(true);
fixture.destroy();
});

});

0 comments on commit 068d08b

Please sign in to comment.