忍者ブログ

刻ノ深淵

低周波音と耳鳴りに悩まされ不眠状態に陥る日々とアンチエイジング。只今、現状打破を試み奮闘中。

休日表記カレンダー(横型・通常型)の設置。

[編集]
■休日表記カレンダー(横型・通常)を設置する方法。 

1)   小粋空間様で配布されている休日表示用カレンダースクリプト(dayChecker.js)をダウンロードする。
  
 ■小粋空間;休日表示付リアルタイムカレンダー for FC2ブログ
   http://www.koikikukan.com/archives/2006/05/09-235138.php

 2) ダウンロードしてきた『dayChecker.js』をエディタで開き、徒然日記様で公開されている下記の『休日表示カレンダー色設定スクリプト』の使用す方、若しくは両方を追記して、ファイルをアップロードする。

 ■徒然日記;忍者ブログ版休日表示カレンダー
  http://suna77777.blog.shinobi.jp/Entry/11/

□休日表示カレンダー色設定スクリプト(横型カレンダー用)
// 休日表示カレンダー色設定スクリプト
// 横型カレンダー用 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' );
                }
            }
        }
    }
}

 3) CSS内に小粋空間様で公開されている下記の『横型カレンダー用デザイン』のソースを追記する。
色などはデザインに合わせて変更する。

□CSSソース
/*-------------------------------------------------------
  横カレンダー用デザイン
-------------------------------------------------------*/
.holiday,
.holiday a:link {
 color: #e50003;
}
.saturday,
.saturday a:link {
color: #0000ff;
}
.tholiday {
display: block;
border: 1px solid #444444;
color: #e50003;
}
.tholiday a:link {
color: #e50003;
}
.tsaturday {
display: block;
border: 1px solid #444444;
color: #0000ff;
}
.tsaturday a:link {
color: #0000ff;
}
.today {
display: block;
color: #444444;
border: 1px solid #444444;
}

 4)  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>
<!-- 横並び型休日表示カレンダー終了 -->
 
5)  通常型カレンダーに休日表記をしたい場合、
[管理画面]→[プラグインの設定]→[カレンダー]→[HTML編集]で記述されているソースを以下のソースに差し替える。
(通常カレンダーと同じデザインにする為、徒然日記様で公開されているものを参考に変更させて頂きました。)

□通常型カレンダー(休日表記)ソース

<table class="CalendarMoveTable">

<tr class="CalendarMoveTr">
<td class="CalendarPrevTd">
<a href="<!--$plugin_calendar_prev_link-->"><!--$plugin_calendar_prev_mon--></a>
</td>
<td class="CalendarNowTd"><!--$plugin_calendar_now_year-->/<!--$plugin_calendar_now_mon--></td>
<td class="CalendarNextTd">
<a href="<!--$plugin_calendar_next_link-->"><!--$plugin_calendar_next_mon--></a>
</td>
</tr>

</table>

<table summary="<!--$plugin_calendar_now_year-->/<!--$plugin_calendar_now_mon-->" class="CalendarTable">
<tr class="CalendarWdayTr">
<th class="CalendarWdaySun">S</th>
<th class="CalendarWday">M</th>
<th class="CalendarWday">T</th>
<th class="CalendarWday">W</th>
<th class="CalendarWday">T</th>
<th class="CalendarWday">F</th>
<th class="CalendarWdaySat">S</th>
</tr>
<!--plugin_calendar-->
<tr>
<td class="holiday"><!--$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="saturday"><!--$calendar_sat--></td>
</tr>
<!--/plugin_calendar-->
</table>

<script type="text/javascript">
<!--
setWeekendAndHoliday(<!--$plugin_calendar_now_year-->,<!--$plugin_calendar_now_mon-->);
//-->
</script>


6) HTML内の<head>~</head> に下記の内容を記述して保存。
<script type="text/javascript" src="http://file.******.blog.shinobi.jp/dayChecker.js"></script>

拍手[0回]

PR