カレンダーコンポーネントで特定の曜日を色分けする
hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の曜日に対して色を付ける方法です。
動作しているところは下記の画像で確認できます。実際に動いているデモはこちらになります。
HTMLの記述
HTMLは通常のカレンダーに加えて、曜日とカラーリング設定（スタイルシートのクラス）を指定できるドロップダウンを設定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"></div> | |
| <p> | |
| <select id="selDowName"> | |
| <option value="sun" selected="">日曜日</option> | |
| <option value="mon">月曜日</option> | |
| <option value="tue">火曜日</option> | |
| <option value="wed">水曜日</option> | |
| <option value="thu">木曜日</option> | |
| <option value="fri">金曜日</option> | |
| <option value="sat">土曜日</option> | |
| </select> | |
| <select id="selCssDowName"> | |
| <option selected="">default</option> | |
| <option>blue</option> | |
| <option>red</option> | |
| </select> | |
| <input type="button" id="btnCssDow" value="適用"> | |
| </p> |
スタイルシートは次のようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .blue { | |
| color: white; | |
| font-weight: bold; | |
| background: blue; | |
| } | |
| .red { | |
| color: white; | |
| font-weight: bold; | |
| background: red; | |
| } |
JavaScriptの記述
ボタンを押した時に this.calendarController.setCssClassForDow を呼び出します。曜日とクラス名を指定します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 週間の日のスタイルにCSSでカスタマイズ | |
| '#btnCssDow click': function() { | |
| this.calendarController.setCssClassForDow( | |
| this.$find('#selDowName').val(), | |
| this.$find("#selCssDowName").val() | |
| ); | |
| }, |
全体のコードは次のようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| var disableDates = []; | |
| var mainController = { | |
| __name : 'h5.ui.container.MainController', | |
| calendarController: h5.ui.components.Calendar, | |
| __meta : { | |
| calendarController: { | |
| rootElement: '#container' | |
| }, | |
| }, | |
| __init: function(){ | |
| this.$find(".select:first").attr("checked", true); | |
| }, | |
| // 週間の日のスタイルにCSSでカスタマイズ | |
| '#btnCssDow click': function() { | |
| this.calendarController.setCssClassForDow( | |
| this.$find('#selDowName').val(), | |
| this.$find("#selCssDowName").val() | |
| ); | |
| }, | |
| }; | |
| h5.core.controller('body', mainController); | |
| }); |
実際に動いているデモはこちらになります。曜日毎に色を変えたい（休日など）時にご利用ください。
hifive開発者ブログ 
コメントは受け付けていません。