No exported member MatCalendarCellClassFunction in Angular Material Datepicker

Question

I'm trying to highlight specific dates on an Angular Material Datepicker view, following the guide as highlighted on the material docs. The example there works fine, and so does the Stackblitz one that is linked.

I've tried importing it to my component as described in the docs with:

import {MatCalendarCellClassFunction} from '@angular/material/datepicker';

But I'm still running into the below error:

@angular/material/datepicker"' has no exported member 'MatCalendarCellClassFunction'.

Running version 10.0.3 and Material version 10.0.1. Should I be importing this from somewhere else?

Absolutely stumped on this one, appreciate any help.

score 2 · Answer 1 · answered Feb 28 '21 at 13:28

I found this answer helpful in sorting it out.

import { MatCalendarCellCssClasses } from '@angular/material/datepicker';
import * as moment from 'moment';

selectedDateClass = (date: moment.Moment): MatCalendarCellCssClasses => {
    const dateToHighlight: Date = new Date();

    // Highlight the date two days ago
    dateToHighlight.setDate(dateToHighlight.getDate() - 2);
    return (date.toDate().getDate() == dateToHighlight.getDate()) ? 'selected-date' : '';
  };

<mat-calendar [dateClass]="selectedDateClass"></mat-calendar>

.selected-date {
  background: orange;
  border-radius: 100%;
}

No exported member MatCalendarCellClassFunction in Angular Material Datepicker

1 Answers1