休日とか、カレンダーを制御してみる
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も何個でも対応してます。