カレンダーコンポーネントで特定の曜日を色分けする

hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の曜日に対して色を付ける方法です。

動作しているところは下記の画像で確認できます。実際に動いているデモはこちらになります。

HTMLの記述

HTMLは通常のカレンダーに加えて、曜日とカラーリング設定（スタイルシートのクラス）を指定できるドロップダウンを設定します。

スタイルシートは次のようになります。

JavaScriptの記述

ボタンを押した時に this.calendarController.setCssClassForDow を呼び出します。曜日とクラス名を指定します。

全体のコードは次のようになります。

実際に動いているデモはこちらになります。曜日毎に色を変えたい（休日など）時にご利用ください。