徒然日記

この休日の色表示に関しては、BlogPeopleでもリンクさせて頂いております、小粋空間さんで公開されているJavascriptを改造して利用させて頂いております。

参考にさせて頂いた記事は休日表示付リアルタイムカレンダー for FC2ブログと休日表示付きリアルタイムカレンダー（月送り・横型） for Movable Typeです。本当に有難うございました。

通常の形状の物はFC2ブログ用として公開されている物、横型の物はMovableType用として公開されている物を夫々一部手直しして利用させて頂いております。

今回忍者ブログ版と銘打っていますが、当方では未確認ですがFC2ブログ等でもHTMLの独自タグの部分を手直しして頂ければ理論上導入可能な筈ですので、宜しければご参考にして頂ければと思います。

また、当方はJavascriptに関しては完全にド素人ですので、おかしな記述・説明等を行っている部分もあるかと思いますが、それらの事で何かお気付きの点や指摘事項等がありましたらお気軽にコメント欄等でご指摘頂けます様にお願い致します。

詳細な導入方法や関数仕様等につきましては小粋空間さんの当該記事や関連記事に詳しく記載されていますのでここでは割愛させて頂き、修正したポイント等のみを抜粋してご説明させて頂きます。ここでは一から説明しない事でここの記述だけでは理解し辛い部分があるかと思いますが、当方のオリジナルのネタでは無く、かなりの部分を小粋空間さんにて公開されている記事等を参考にさせて頂いておりますので、オリジナルを尊重すべくこの様な形態を採らせて頂いています。何卒ご了承下さい。

尚、当方の記事の記載内容に起因する、ビギナーレベルの疑問、質問等を小粋空間さんに直接お問い合わせされる様な行為はお控え頂きたく思います。

【Javascriptの修正部分等】

・通常型カレンダーと併用可能にする為、横型カレンダーの設定用関数名を変更。 (setWeekendAndHoliday → setLCWeekendAndHoliday)。

・通常型カレンダーの設定用関数 (setWeekendAndHoliday) にて、tableに設定されているsummaryを読み取る処理をHTML上で出現する最初の１番目のtableだけを決め打ちで処理するのでは無く、全てのtableのsummaryを読み取り、その上でsummaryの設定値がYYYY/MM形式の場合のみ処理する様に修正。

・通常型カレンダーの設定用関数 (setWeekendAndHoliday) にて、当年/当月の値をパラメータ渡しにする様に変更。

・dayChecker関数の呼び出し部分を夫々の設定用関数内に記述する様に変更。

修正の一番の肝は２番目の部分で、この変更を行わないと現在使用しているテンプレートの様にHTMLでの記述順が中央の記事か書かれたカラムが先に書かれて、その後に左右のサイドバー部分が書かれる様に記述されている場合等で、かつコメント記入欄等の様な部分でtableレイアウトを用いている場合に、記事の詳細表示等を行うと通常型カレンダーがHTMLのマークアップ順で必ずしも１番目のtableとはならず、その結果としてカレンダーの色の設定が行われない不具合が見受けられましたので、その対処として全てのtableについて処理対象とする様に修正しました。

ちなみに今このブログで双方の形状のカレンダーで週末に記事が書き込まれている場合に色が設定される/されないの差異がありますが、この事は今の所まだ私も詳しく調べていないのでなんとも言えませんが、恐らく小粋空間さんの関連記事の78番目のコメントでirukaさんが指摘されている修正を行う事で回避される筈だと思います。私も近く修正する予定です。もしかして別の部分で私の設定にミスがあるのかも知れませんが。

以下に忍者ブログにおける夫々の形状のカレンダーのHTMLサンプルソースを記載します。

【横並び型休日表示カレンダーのHTML記述】

<!-- 横並び型休日表示カレンダー開始 -->
<div id="line_calendar">
<a href="<!--$plugin_calendar_prev_link-->" title="<!--$plugin_calendar_prev_year-->年<!--$plugin_calendar_prev_mon-->月の記事一覧表示へ"><<</a> | <a href="<!--$g_url-->Date/<!--$plugin_calendar_now_year--><!--$plugin_calendar_now_mon-->/" title="<!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月の記事一覧表示へ"><!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月</a> | <!--plugin_calendar_date--><span class="day"><!--$calendar_date_day--></span> <!--/plugin_calendar_date-->| <a href="<!--$plugin_calendar_next_link-->" title="<!--$plugin_calendar_next_year-->年<!--$plugin_calendar_next_mon-->月の記事一覧表示へ">>></a>
</div>
<script type="text/javascript">
<!--
setLCWeekendAndHoliday(<!--$plugin_calendar_now_year-->,<!--$plugin_calendar_now_mon-->);
//-->
</script>
<!-- 横並び型休日表示カレンダー終了 -->

【通常型休日表示カレンダーのHTML記述】

<!-- 休日表示カレンダー開始 -->
<div class="calendar">
<table summary="<!--$plugin_calendar_now_year-->/<!--$plugin_calendar_now_mon-->">
<caption class="calendarhead"><a href="<!--$plugin_calendar_prev_link-->" title="<!--$plugin_calendar_prev_year-->年<!--$plugin_calendar_prev_mon-->月の記事一覧表示へ"><<</a> | <a href="<!--$g_url-->Date/<!--$plugin_calendar_now_year--><!--$plugin_calendar_now_mon-->/" title="<!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月の記事一覧表示へ"><!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月</a> | <a href="<!--$plugin_calendar_next_link-->" title="<!--$plugin_calendar_next_year-->年<!--$plugin_calendar_next_mon-->月の記事一覧表示へ">>></a></caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="holiday">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="saturday">Sat</span></span></th>
</tr>
<!--plugin_calendar-->
<tr>
<td class="day"><!--$calendar_sun--></td>
<td class="day"><!--$calendar_mon--></td>
<td class="day"><!--$calendar_tue--></td>
<td class="day"><!--$calendar_wed--></td>
<td class="day"><!--$calendar_thu--></td>
<td class="day"><!--$calendar_fri--></td>
<td class="day"><!--$calendar_sat--></td>
</tr>
<!--/plugin_calendar-->
</table>
</div>
<script type="text/javascript">
<!--
setWeekendAndHoliday(<!--$plugin_calendar_now_year-->,<!--$plugin_calendar_now_mon-->);
//-->
</script>
<!-- 休日表示カレンダー終了 -->

以下に当方にてカスタマイズした夫々の形状のカレンダーの色設定スクリプトを記載します。

【横並び型休日表示カレンダーの色設定スクリプト】

// 休日表示カレンダー色設定スクリプト
// 横型カレンダー用 MT用改
function setLCWeekendAndHoliday( year, month ) {
    var element = document.getElementById( 'line_calendar' );
    var spans = element.getElementsByTagName( 'span' );
    var day;
    for ( i = 0; i < spans.length; i++) {
        if ( ( spans[i].getAttribute( 'class' ) == 'day' || spans[i].getAttribute( 'className' ) == 'day' ) ) {
            if ( spans[i].innerHTML.indexOf( "href" ) != -1) {
                day = spans[i].getElementsByTagName( "a" )[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            var dc = new dayChecker();                      // dayChecker()を実行
            if ( dc.isHoliday( year, month, day ) ) {
                if ( dc.isToday( year, month, day ) ) {
                    spans[i].setAttribute( 'class', 'tholiday' );
                    spans[i].setAttribute( 'className', 'tholiday' );
                } else {
                    spans[i].setAttribute( 'class', 'holiday' );
                    spans[i].setAttribute( 'className', 'holiday' );
                }
            } else if ( dc.isSaturday( year, month, day ) ) {
                if ( dc.isToday( year, month, day ) ) {
                    spans[i].setAttribute( 'class', 'tsaturday' );
                    spans[i].setAttribute( 'className', 'tsaturday' );
                } else {
                    spans[i].setAttribute( 'class', 'saturday' );
                    spans[i].setAttribute( 'className', 'saturday' );
                }
            } else if ( dc.isToday( year, month, day ) ) {
                spans[i].setAttribute( 'class', 'today' );
                spans[i].setAttribute( 'className', 'today' );
            }
        }
    }
}

【通常型休日表示カレンダーの色設定スクリプト】

// 休日表示カレンダー色設定スクリプト
// 通常型カレンダー用 FC2用改
function setWeekendAndHoliday( y, m ) {
    var elements = document.getElementsByTagName( "table" );
    // 配列順序0のみを決め打ちで処理するのを止めて、summary内容をチェックして処理する方法に変更。
    for ( j = 0; j < elements.length; j++ ) {
        var element = elements[j].getAttribute( "summary" );
        var year = element.split( "/" )[0];
        var month = element.split( "/" )[1];
        if ( !( year == y && month == m ) ) {
            continue;
        }
        var spans = elements[j].getElementsByTagName( "td" );
        var day;
        for ( i = 0; i < spans.length; i++) {
            if (spans[i].getAttribute( "class" ) == "day" || spans[i].getAttribute( "className" ) == "day" ) {
                if ( spans[i].innerHTML.indexOf( "href" ) != -1 ) {
                    day = spans[i].getElementsByTagName( "a" )[0].innerHTML;
                } else {
                    day = spans[i].innerHTML;
                }
                var dc = new dayChecker();                      // dayChecker()を実行
                if ( dc.isHoliday( year, month, day ) ) {
                    if ( dc.isToday( year, month, day ) ) {
                        spans[i].setAttribute( 'class', 'tholiday' );
                        spans[i].setAttribute( 'className', 'tholiday' );
                    } else {
                        spans[i].setAttribute( 'class', 'holiday' );
                        spans[i].setAttribute( 'className', 'holiday' );
                    }
                } else if ( dc.isSaturday( year, month, day ) ) {
                    if ( dc.isToday( year, month, day ) ) {
                        spans[i].setAttribute( 'class', 'tsaturday' );
                        spans[i].setAttribute( 'className', 'tsaturday' );
                    } else {
                        spans[i].setAttribute( 'class', 'saturday' );
                        spans[i].setAttribute( 'className', 'saturday' );
                    }
                }
                if ( dc.isToday( year, month, day ) ) {
                    spans[i].setAttribute( 'class', 'today' );
                    spans[i].setAttribute( 'className', 'today' );
                }
            }
        }
    }
}

上記の２関数で呼び出しているdayChecker()は小粋空間さんで頒布されているdayChecker.js内に含まれている関数です。

上記の２関数は2006.08.03公開のdayChecker.js Ver1.05に合わせて動作確認しております。

dayChecker.jsにつきましては直接小粋空間さんから入手頂き、上記２関数をdayChecker.js内に追記して頂いて外部関数化して、それを<head>～</head>内から読み込ませる方法を取るのが最も良いのかと思います。

その上でカレンダー表示のHTMLタグの直後で色設定のJavascriptを実行してやる事で、ページを読み込んだ際にカレンダー自体の表示処理と色の設定処理が微妙にずれる事を極力防ぐ事が出来ます。

また、CSSでの各設定につきましては小粋空間さんにて記載されている通りの設定を頂く事で対応可能ですので、そちらをご参照下さい。