TopJavaScriptカレンダー > 2007年2月
2007年2月 1日

カレンダーの日曜と祝日のスタイルを別にする

February 1,2007 2:01 AM
Tag:[, ]
Permalink

当サイトで公開しているカレンダーのカスタマイズは、日曜と祝日に同じスタイル(厳密には同一のクラス属性値)を割り当てていますが、「日曜日と祝日のスタイルを分けるにはどうすれば良いでしょうか」というご質問を頂きましたので、本エントリーにてクラス属性を個別に割り当てる方法をご紹介致します。

ここでは Movable Type の「Ajax 月送りカレンダー」を例に説明していますが、他のブログのカレンダーカスタマイズでも同じような変更を行えば大丈夫だと思います。

1.dayChecker.js の修正

任意のエディタで dayChecker.js を開き、下記の赤色部分を削除します。

function isHoliday(year, month, day) {
    var week = new Date(year, month - 1, day).getDay();
    if (week == 0) {
        return true;
    }
    switch(parseInt(month,10)) {
    case 1:
        if (day == 1) {
            return true;
        }
     :

削除した部分は祝日判定の中で日曜日も抱き合わせで判定している部分です。
今思うと、isHoliday() という関数で日曜判定を行うこと自体、妥当でなかったかもしれません(反省)。

2.ajaxCalendar.js の修正

任意のエディタで ajaxCalendar.js を開き、下記の青色部分を追加します。

function setWeekendAndHoliday(y,m) {
        :
       (略)
        :
        if (isHoliday(year, month, day)) {
            spans[i].setAttribute('class', 'holiday');
            spans[i].setAttribute('className', 'holiday');
        } else if(isSunday(year, month, day)) {
            spans[i].setAttribute('class', 'sunday');
            spans[i].setAttribute('className', 'sunday');
        } else if(isSaturday(year, month, day)) {
            spans[i].setAttribute('class', 'saturday');
            spans[i].setAttribute('className', 'saturday');
        }
        if (isToday(year, month, day)) {
            spans[i].parentNode.setAttribute('class', 'today');
            spans[i].parentNode.setAttribute('className', 'today');
        }
        :

プログラムが書ける方はお分かりと思いますが、上記のロジックは祝日が土日より先に判定されるようにしてますので、結果として祝日のスタイルが土日のスタイルより優先されます。

なお、他のブログのカレンダーカスタマイズで ajaxCalendar.js がない場合も、上記の土日祝日判定処理はどこかに埋め込まれています。

3.CSS の修正

ひとまとめにしている日曜と祝日のスタイルを分けて設定します。

変更前

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}

変更後

.sunday,
.sunday a:link,
.sunday a:visited {
(日曜日のスタイルを設定)
}
.holiday,
.holiday a:link,
.holiday a:visited {
(祝日のスタイルを設定)
}

なお、.sunday はカレンダーの曜日部分にも使われてます。異なるスタイルを設定したい場合はどちらかの クラス名を変更すると良いでしょう。

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3