fix(datepicker): support dateClass on year and multi-year views

src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {MatCalendarCellCssClasses} from '@angular/material/datepicker';
+import {MatCalendarCellClassFunction} from '@angular/material/datepicker';
 
 /** @title Datepicker with custom date classes */
 @Component({
@@ -9,10 +9,15 @@ import {MatCalendarCellCssClasses} from '@angular/material/datepicker';
   encapsulation: ViewEncapsulation.None,
 })
 export class DatepickerDateClassExample {
-  dateClass = (d: Date): MatCalendarCellCssClasses => {
-    const date = d.getDate();
+  dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
+    // Only highligh dates inside the month view.
+    if (view === 'month') {
+      const date = cellDate.getDate();
 
-    // Highlight the 1st and 20th day of each month.
-    return (date === 1 || date === 20) ? 'example-custom-date-class' : '';
+      // Highlight the 1st and 20th day of each month.
+      return (date === 1 || date === 20) ? 'example-custom-date-class' : '';
+    }
+
+    return '';
   }
 }

src/material/datepicker/calendar-body.ts

@@ -21,11 +21,13 @@ import {
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 
-/**
- * Extra CSS classes that can be associated with a calendar cell.
- */
+/** Extra CSS classes that can be associated with a calendar cell. */
 export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
 
+/** Function that can generate the extra classes that should be added to a calendar cell. */
+export type MatCalendarCellClassFunction<D> =
+    (date: D, view: 'month' | 'year' | 'multi-year') => MatCalendarCellCssClasses;
+
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
  * @docs-private

src/material/datepicker/calendar.html

@@ -21,6 +21,7 @@
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"
       [minDate]="minDate"
+      [dateClass]="dateClass"
       (monthSelected)="_monthSelectedInYearView($event)"
       (selectedChange)="_goToDateInView($event, 'month')">
   </mat-year-view>
@@ -32,6 +33,7 @@
       [dateFilter]="dateFilter"
       [maxDate]="maxDate"
       [minDate]="minDate"
+      [dateClass]="dateClass"
       (yearSelected)="_yearSelectedInMultiYearView($event)"
       (selectedChange)="_goToDateInView($event, 'year')">
   </mat-multi-year-view>

src/material/datepicker/calendar.ts

@@ -31,7 +31,7 @@ import {
   MatDateFormats,
 } from '@angular/material/core';
 import {Subject, Subscription} from 'rxjs';
-import {MatCalendarCellCssClasses, MatCalendarUserEvent} from './calendar-body';
+import {MatCalendarUserEvent, MatCalendarCellClassFunction} from './calendar-body';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MatDatepickerIntl} from './datepicker-intl';
 import {MatMonthView} from './month-view';
@@ -245,7 +245,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   @Input() dateFilter: (date: D) => boolean;
 
   /** Function that can be used to add custom CSS classes to dates. */
-  @Input() dateClass: (date: D) => MatCalendarCellCssClasses;
+  @Input() dateClass: MatCalendarCellClassFunction<D>;
 
   /** Start of the comparison range. */
   @Input() comparisonStart: D | null;

src/material/datepicker/datepicker-base.ts

@@ -53,7 +53,7 @@ import {filter, take} from 'rxjs/operators';
 import {MatCalendar} from './calendar';
 import {matDatepickerAnimations} from './datepicker-animations';
 import {createMissingDateImplError} from './datepicker-errors';
-import {MatCalendarCellCssClasses, MatCalendarUserEvent} from './calendar-body';
+import {MatCalendarUserEvent, MatCalendarCellClassFunction} from './calendar-body';
 import {DateFilterFn} from './datepicker-input-base';
 import {
   ExtractDateTypeFromSelection,
@@ -322,7 +322,7 @@ export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
   @Input() panelClass: string | string[];
 
   /** Function that can be used to add custom CSS classes to dates. */
-  @Input() dateClass: (date: D) => MatCalendarCellCssClasses;
+  @Input() dateClass: MatCalendarCellClassFunction<D>;
 
   /** Emits when the datepicker has been opened. */
   @Output('opened') openedStream: EventEmitter<void> = new EventEmitter<void>();

src/material/datepicker/month-view.spec.ts

@@ -441,9 +441,11 @@ describe('MatMonthView', () => {
   describe('month view with custom date classes', () => {
     let fixture: ComponentFixture<MonthViewWithDateClass>;
     let monthViewNativeElement: Element;
+    let dateClassSpy: jasmine.Spy;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(MonthViewWithDateClass);
+      dateClassSpy = spyOn(fixture.componentInstance, 'dateClass').and.callThrough();
       fixture.detectChanges();
 
       let monthViewDebugElement = fixture.debugElement.query(By.directive(MatMonthView))!;
@@ -455,6 +457,10 @@ describe('MatMonthView', () => {
       expect(cells[0].classList).not.toContain('even');
       expect(cells[1].classList).toContain('even');
     });
+
+    it('should call dateClass with the correct view name', () => {
+      expect(dateClassSpy).toHaveBeenCalledWith(jasmine.any(Date), 'month');
+    });
   });
 
 });

src/material/datepicker/month-view.ts

@@ -38,8 +38,8 @@ import {Directionality} from '@angular/cdk/bidi';
 import {
   MatCalendarBody,
   MatCalendarCell,
-  MatCalendarCellCssClasses,
   MatCalendarUserEvent,
+  MatCalendarCellClassFunction,
 } from './calendar-body';
 import {createMissingDateImplError} from './datepicker-errors';
 import {Subscription} from 'rxjs';
@@ -120,7 +120,7 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
   @Input() dateFilter: (date: D) => boolean;
 
   /** Function that can be used to add custom CSS classes to dates. */
-  @Input() dateClass: (date: D) => MatCalendarCellCssClasses;
+  @Input() dateClass: MatCalendarCellClassFunction<D>;
 
   /** Start of the comparison range. */
   @Input() comparisonStart: D | null;
@@ -370,7 +370,7 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
             this._dateAdapter.getMonth(this.activeDate), i + 1);
       const enabled = this._shouldEnableDate(date);
       const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
-      const cellClasses = this.dateClass ? this.dateClass(date) : undefined;
+      const cellClasses = this.dateClass ? this.dateClass(date, 'month') : undefined;
 
       this._weeks[this._weeks.length - 1].push(new MatCalendarCell<D>(i + 1, dateNames[i],
           ariaLabel, enabled, cellClasses, this._getCellCompareValue(date)!, date));

src/material/datepicker/multi-year-view.spec.ts

@@ -34,6 +34,7 @@ describe('MatMultiYearView', () => {
         StandardMultiYearView,
         MultiYearViewWithDateFilter,
         MultiYearViewWithMinMaxDate,
+        MultiYearViewWithDateClass,
       ],
       providers: [
         {provide: Directionality, useFactory: () => dir = {value: 'ltr'}}
@@ -343,6 +344,32 @@ describe('MatMultiYearView', () => {
       expect(cells[9].classList).not.toContain('mat-calendar-body-disabled');
     });
   });
+
+  describe('multi-year view with custom date classes', () => {
+    let fixture: ComponentFixture<MultiYearViewWithDateClass>;
+    let multiYearViewNativeElement: Element;
+    let dateClassSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MultiYearViewWithDateClass);
+      dateClassSpy = spyOn(fixture.componentInstance, 'dateClass').and.callThrough();
+      fixture.detectChanges();
+
+      let multiYearViewDebugElement = fixture.debugElement.query(By.directive(MatMultiYearView))!;
+      multiYearViewNativeElement = multiYearViewDebugElement.nativeElement;
+    });
+
+    it('should be able to add a custom class to some dates', () => {
+      let cells = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+      expect(cells[0].classList).toContain('even');
+      expect(cells[1].classList).not.toContain('even');
+    });
+
+    it('should call dateClass with the correct view name', () => {
+      expect(dateClassSpy).toHaveBeenCalledWith(jasmine.any(Date), 'multi-year');
+    });
+  });
+
 });
 
 @Component({
@@ -387,3 +414,16 @@ class MultiYearViewWithMinMaxDate {
   minDate: Date | null;
   maxDate: Date | null;
 }
+
+
+@Component({
+  template: `
+    <mat-multi-year-view [activeDate]="activeDate" [dateClass]="dateClass"></mat-multi-year-view>
+  `
+})
+class MultiYearViewWithDateClass {
+  activeDate = new Date(2017, JAN, 1);
+  dateClass(date: Date) {
+    return date.getFullYear() % 2 == 0 ? 'even' : undefined;
+  }
+}

src/material/datepicker/multi-year-view.ts

@@ -33,7 +33,12 @@ import {
 } from '@angular/core';
 import {DateAdapter} from '@angular/material/core';
 import {Directionality} from '@angular/cdk/bidi';
-import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
+import {
+  MatCalendarBody,
+  MatCalendarCell,
+  MatCalendarUserEvent,
+  MatCalendarCellClassFunction,
+} from './calendar-body';
 import {createMissingDateImplError} from './datepicker-errors';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
@@ -109,6 +114,9 @@ export class MatMultiYearView<D> implements AfterContentInit, OnDestroy {
   /** A function used to filter which dates are selectable. */
   @Input() dateFilter: (date: D) => boolean;
 
+  /** Function that can be used to add custom CSS classes to date cells. */
+  @Input() dateClass: MatCalendarCellClassFunction<D>;
+
   /** Emits when a new year is selected. */
   @Output() readonly selectedChange: EventEmitter<D> = new EventEmitter<D>();
 
@@ -251,8 +259,11 @@ export class MatMultiYearView<D> implements AfterContentInit, OnDestroy {
 
   /** Creates an MatCalendarCell for the given year. */
   private _createCellForYear(year: number) {
-    let yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
-    return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
+    const date = this._dateAdapter.createDate(year, 0, 1);
+    const yearName = this._dateAdapter.getYearName(date);
+    const cellClasses = this.dateClass ? this.dateClass(date, 'multi-year') : undefined;
+
+    return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year), cellClasses);
   }
 
   /** Whether the given year is enabled. */

src/material/datepicker/year-view.spec.ts

@@ -33,6 +33,7 @@ describe('MatYearView', () => {
         // Test components.
         StandardYearView,
         YearViewWithDateFilter,
+        YearViewWithDateClass,
       ],
       providers: [
         {provide: Directionality, useFactory: () => dir = {value: 'ltr'}}
@@ -329,6 +330,32 @@ describe('MatYearView', () => {
     });
 
   });
+
+  describe('year view with custom date classes', () => {
+    let fixture: ComponentFixture<YearViewWithDateClass>;
+    let yearViewNativeElement: Element;
+    let dateClassSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(YearViewWithDateClass);
+      dateClassSpy = spyOn(fixture.componentInstance, 'dateClass').and.callThrough();
+      fixture.detectChanges();
+
+      let yearViewDebugElement = fixture.debugElement.query(By.directive(MatYearView))!;
+      yearViewNativeElement = yearViewDebugElement.nativeElement;
+    });
+
+    it('should be able to add a custom class to some month cells', () => {
+      let cells = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+      expect(cells[0].classList).toContain('even');
+      expect(cells[1].classList).not.toContain('even');
+    });
+
+    it('should call dateClass with the correct view name', () => {
+      expect(dateClassSpy).toHaveBeenCalledWith(jasmine.any(Date), 'year');
+    });
+  });
+
 });
 
 
@@ -368,3 +395,14 @@ class YearViewWithDateFilter {
     return true;
   }
 }
+
+
+@Component({
+  template: `<mat-year-view [activeDate]="activeDate" [dateClass]="dateClass"></mat-year-view>`
+})
+class YearViewWithDateClass {
+  activeDate = new Date(2017, JAN, 1);
+  dateClass(date: Date) {
+    return date.getMonth() % 2 == 0 ? 'even' : undefined;
+  }
+}

src/material/datepicker/year-view.ts

@@ -34,7 +34,12 @@ import {
 } from '@angular/core';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
 import {Directionality} from '@angular/cdk/bidi';
-import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
+import {
+  MatCalendarBody,
+  MatCalendarCell,
+  MatCalendarUserEvent,
+  MatCalendarCellClassFunction,
+} from './calendar-body';
 import {createMissingDateImplError} from './datepicker-errors';
 import {Subscription} from 'rxjs';
 import {startWith} from 'rxjs/operators';
@@ -103,6 +108,9 @@ export class MatYearView<D> implements AfterContentInit, OnDestroy {
   /** A function used to filter which dates are selectable. */
   @Input() dateFilter: (date: D) => boolean;
 
+  /** Function that can be used to add custom CSS classes to date cells. */
+  @Input() dateClass: MatCalendarCellClassFunction<D>;
+
   /** Emits when a new month is selected. */
   @Output() readonly selectedChange: EventEmitter<D> = new EventEmitter<D>();
 
@@ -254,11 +262,12 @@ export class MatYearView<D> implements AfterContentInit, OnDestroy {
 
   /** Creates an MatCalendarCell for the given month. */
   private _createCellForMonth(month: number, monthName: string) {
-    let ariaLabel = this._dateAdapter.format(
-        this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1),
-        this._dateFormats.display.monthYearA11yLabel);
-    return new MatCalendarCell(
-        month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));
+    const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);
+    const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.monthYearA11yLabel);
+    const cellClasses = this.dateClass ? this.dateClass(date, 'year') : undefined;
+
+    return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel,
+        this._shouldEnableMonth(month), cellClasses);
   }
 
   /** Whether the given month is enabled. */