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

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

Posted at February 1,2007 2:01 AM
Tag:[Calendar, JavaScript]

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)