休日とか、カレンダーを制御してみる
CMSとかでエントリー毎にカレンダーがあって、任意の日を休日に指定したいとか、満室です-とかしたい場合に、CMSで対象の日の値だけ渡して、あとはjsでやれるんじゃない?
と思って書いてみました。
例えば以下のようなhtml。
<table summary="2010/3 カレンダー">
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
<tr>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<!-- 略 -->
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="hidden" class="holiday" value="7,14,21,22,28" />
<input type="hidden" class="saturday" value="6,13,20,27" />
tableの下のinputに入っている要素が対象としたい日です。
一個目のinputには日曜と祝日の値を入れてます。
二個目のinputには土曜の値を入れてます。
ちなみにcssはこんな感じ。
table {
border-left: 1px solid #333;
border-top: 1px solid #333;
border-collapse: collapse;
table-layout: fixed;
}
th {
border-bottom: 1px solid #333;
border-right: 1px solid #333;
}
td {
border-bottom: 1px solid #333;
border-right: 1px solid #333;
}
td.holiday {
background-color: #f69;
}
td.saturday {
background-color: #69f;
}
で、jQuery使ってこう書きました。
$('table').each(function(){
var keyDays = {};
keyDays.holiday = $(this).next().val().split(',');
keyDays.saturday = $(this).next().next().val().split(',');
$('td',this).each(function(){
var self = $(this);
var day = self.text();
$.each(keyDays,function(key,ary){
$.each(ary,function(i,val){
if(day == val){
switch(key){
case 'holiday':
self.addClass('holiday');
break;
case 'saturday':
self.addClass('saturday');
break;
}
}
});
});
});
});
はじめにkeyDaysというオブジェクト?json?を宣言。
ちゃんとわかってませんが、この型だと連想配列のように扱えます。
そのkeyDaysに、inputから取ってきたカンマ区切りの値を、カンマで区切って、holidayとsaturdayをキーとして配列で格納する。
次に、$('td',this).each();で、カレントのテーブルの全tdを回し、その内部でさらに生成したkeyDaysを、$.each();で回します。
$.each();はforeachのような使い方ができるようなので、さらにその内部で$.eachで生成したaryを$.eachで回し、ifとswichで処理します。
他にも値が増やしたい時は、初めのkeyDaysの設定と、switch文内に処理を増やせばOKです。
tableも何個でも対応してます。