Angular material: datepicker highlighting weekends

Question

I would like to highlight weekends (Saturday and Sunday) on the datepicker.

I have tried readapting the lockedweekendfilter that uses boolean for day position 0 (Sunday) and position 6 (Saturday). This code is from the Material site version 6. However, it works only for disabling dates. I don't want to disable Sunday and Saturday.

@Injectable()
export class InjectDatePickerGeneral {
    constructor() {}

    lockedWeekendFilter(d: Date): boolean {
        const date = new Date(d);
        const day = date.getDay();
        // Prevent Saturday and Sunday from being selected.
        return day !== 0 && day !== 6;
    }
}

Ideally, I would like to add a class for Saturday and Sunday in the datepicker so I can change the color and perhaps the background too.

Answer 1

This is doable using only CSS... extending the example shared here

relevant CSS:

::ng-deep .mat-calendar-body > tr > td:nth-child(6) > .mat-calendar-body-cell-content,
::ng-deep .mat-calendar-body > tr > td:nth-child(7) > .mat-calendar-body-cell-content { color:red !important; }
::ng-deep .mat-calendar-body > tr > td:nth-child(6),
::ng-deep .mat-calendar-body > tr > td:nth-child(7) {  background: lightyellow;}

complete working stackblitz with Material 5.2.4 & angular 5.2.4