カレンダーコンポーネントで特定の曜日を色分けする
hifiveのUIライブラリの一つ、カレンダーコンポーネントのTipsを紹介します。今回は特定の曜日に対して色を付ける方法です。
動作しているところは下記の画像で確認できます。実際に動いているデモはこちらになります。
HTMLの記述
HTMLは通常のカレンダーに加えて、曜日とカラーリング設定（スタイルシートのクラス）を指定できるドロップダウンを設定します。
| <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> |
スタイルシートは次のようになります。
| .blue { | |
| color: white; | |
| font-weight: bold; | |
| background: blue; | |
| } | |
| .red { | |
| color: white; | |
| font-weight: bold; | |
| background: red; | |
| } |
JavaScriptの記述
ボタンを押した時に this.calendarController.setCssClassForDow を呼び出します。曜日とクラス名を指定します。
| // 週間の日のスタイルにCSSでカスタマイズ | |
| '#btnCssDow click': function() { | |
| this.calendarController.setCssClassForDow( | |
| this.$find('#selDowName').val(), | |
| this.$find("#selCssDowName").val() | |
| ); | |
| }, |
全体のコードは次のようになります。
| $(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); | |
| }); |
実際に動いているデモはこちらになります。曜日毎に色を変えたい（休日など）時にご利用ください。
コメントは受け付けていません。