カレンダーコンポーネントで特定の曜日を色分けする
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); | |
}); |
実際に動いているデモはこちらになります。曜日毎に色を変えたい(休日など)時にご利用ください。
コメントは受け付けていません。