小粋空間  -  a cheap joke and a play on words site

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

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

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

１．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() という関数で日曜判定を行うこと自体、妥当でなかったかもしれません（反省）。

２．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 がない場合も、上記の土日祝日判定処理はどこかに埋め込まれています。

３．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 はカレンダーの曜日部分にも使われてます。異なるスタイルを設定したい場合はどちらかの クラス名を変更すると良いでしょう。

• 
• Tweet