カレンダーコンポーネントで特定の曜日を色分けする
hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の曜日に対して色を付ける方法です。
動作しているところは下記の画像で確認できます。実際に動いているデモはこちらになります。
HTMLの記述
HTMLは通常のカレンダーに加えて、曜日とカラーリング設定(スタイルシートのクラス)を指定できるドロップダウンを設定します。
スタイルシートは次のようになります。
JavaScriptの記述
ボタンを押した時に this.calendarController.setCssClassForDow を呼び出します。曜日とクラス名を指定します。
全体のコードは次のようになります。
実際に動いているデモはこちらになります。曜日毎に色を変えたい(休日など)時にご利用ください。
コメントは受け付けていません。