コンテンツへスキップ

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

by : 2017/11/09

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>

view raw

index.html

hosted with ❤ by GitHub

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


.blue {
color: white;
font-weight: bold;
background: blue;
}
.red {
color: white;
font-weight: bold;
background: red;
}

view raw

index.css

hosted with ❤ by GitHub

JavaScriptの記述

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


// 週間の日のスタイルにCSSでカスタマイズ
'#btnCssDow click': function() {
this.calendarController.setCssClassForDow(
this.$find('#selDowName').val(),
this.$find("#selCssDowName").val()
);
},

view raw

index.css

hosted with ❤ by GitHub

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


$(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);
});

view raw

index.js

hosted with ❤ by GitHub


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

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。