【Angular Material】md-datepickerのカレンダーで休日の背景色を変更

Angular Materialのmd-datepickerで表示されるカレンダーで、土曜日と日曜日の背景色を変更して少し見えやすくしたいと思ったのですが、なかなかうまくいきませんでした。

結局、時間の都合もあり途中で断念したのですが、後でもう一度試してみようと思うので、途中までやってみた内容を残しておきます。

HTML

<div layout-gt-sm="row">
    <div flex-gt-xs="">
        <md-datepicker name="dateField" ng-model="sampleDate"></md-datepicker>
    </div>
</div>

CSS

.md-calendar-date{position:relative;}
.md-calendar-date[aria-label*="Sunday"]:before{content:"";width:42px;height:40px;position:absolute;background-color:#fdd;z-index:-1;top:0px;left:0px;margin:2px;margin-left:16px;}
.md-calendar-date[aria-label*="Saturday"]:before{content:"";width:42px;height:40px;position:absolute;background-color:#ddf;z-index:-1;top:0px;left:0px;margin:2px;margin-right:16px;}
.md-calendar-date .md-calendar-date-selection-indicator{position:relative;}

ブラウザの開発者ツールで確認する限りでは、曜日の情報は aria-label に設定されているようでした。

上記のCSSでは、Angular Materialの最新版だと表示が崩れたり、Edgeで微妙だったような...と確認すら満足にしてませんが、後々、対応できたらと思います。

• Angular Material - Demos > Datepicker