maki-o memo

制作に関する私的なメモです

選択されているタグ : jQuery

タグを絞り込む : a-blog_cms css3 CSS_nite Dreamweaver FontAwesome IE6 js json miniMU tips WCAN カスタマイズ セミナー ブランディング プラグイン

休日とか、カレンダーを制御してみる

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>&nbsp;</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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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も何個でも対応してます。


プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ