Main | ツリー化 >>
Top ＞ FC2ブログ ＞ カスタマイズ ＞ カレンダー [全て開く]
2009年2月17日

JavaScript カレンダー修正（シルバーウィーク対応）

February 17,2009 12:55 AM
Tag：[, ]
Permalink

現在公開中の「JavaScript カレンダー」をバージョンアップし、2009年9月のシルバーウィークに対応しました。

次のように、9月22日が休日表示になります。9月の表示はとりあえず2015年まで確認しています。

2009年9月のカレンダー

当サイトで公開している「Ajax 月送りカレンダー」や「休日表示付きリアルタイムカレンダー」など、カレンダーの休日の色を変えるカスタマイズをご利用の方は、下記のリンクから dayChecker.js をダウンロードして、現在ご利用の dayChecker.js と入れ替えてください。

WordPress の場合はプラグインファイルに同梱していますので、プラグインファイルの中にある dayChecker.js の内容を一部入れ替えてください。

Comments [7] | Trackbacks [0]
2008年10月 7日

休日表示付リアルタイムカレンダー（横型） for FC2ブログ

October 7,2008 12:03 AM
Tag：[, ]
Permalink

FC2 ブログの横型カレンダーに土・日・休日・本日を表示するカスタマイズです。
以前ご質問を頂いたもので、本エントリーにて紹介します。

FC2ブログ用休日表示付リアルタイムカレンダー

テーブル型のカレンダーに休日表示を行う場合は「休日表示付リアルタイムカレンダー for FC2ブログ」を参照してください。

１．休日表示用カレンダースクリプトのダウンロード

下記の download を右クリックして「対象をファイルに保存」または「名前をつけてリンク先を保存」を選択し、休日表示用カレンダースクリプトをダウンロードします。ファイル名は dayChecker.js で保存してください。

download

２．スクリプトのアップロード

ダウンロードした dayChecker.js をFC2ブログの「ツール」→「ファイルのアップロード」機能を使ってアップロードしてください。アップロードした URL は後の手順で利用しますj。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記の設定を追加してください。

<script type="text/javascript" src="dayChecker.js アップロードしたURL" charset="utf-8"></script>

dayChecker.js の文字コードは utf-8 で作成していますが、FC2ブログの文字コード（EUC）に変更してアップロードする場合、上記のタグは charset 属性を省いた形で設定してください。

４．テンプレートの修正２（カレンダーの追加）

カレンダーを表示したい部分に、下記のカレンダー表示タグを追加してください。
当ブログで配布している「FC2 ブログテンプレート」のHTML（横型カレンダー版）を使用している場合、このタグは設定済みなので、新たに設定する必要はありません。

<div id="globalnavi">
<a href="<%prev_month_link>" title="<%prev_month>月のページへ"><</a> 
<%now_year>年<%now_month>月 |
<!--calender2-->
<span class="day2"><%days></span>
<!--/calender2-->
 <a href="<%next_month_link>" title="<%next_month>月のページへ">></a>
</div>

５．テンプレートの修正２（休日表示用スクリプトの追加）

４項のタグより下（またはbody 終了タグの直前）に、下記の休日表示用スクリプトを追加してください。

<script type="text/javascript">
<!--
function setWeekendAndHoliday() {
    var element = document.getElementById("globalnavi");
    var elements = element.getElementsByTagName("a");
    var href = elements[0].getAttribute("href");
    href.match(/blog-date-(\w\w\w\w)(\w\w)\.html/);
    var year = RegExp.$1;
    var month = parseInt(RegExp.$2,10) + 1;
    if (month == 13) {
      month = 1;
      year++;
    }
    var spans = element.getElementsByTagName("span");
    var day;
 
    for (i = 0; i < spans.length; i++) {
        if (spans[i].className == "day2") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (dc.isHoliday(year, month, day)) {
                if (dc.isToday(year, month, day)) {
                    spans[i].className = 'day2 tholiday';
                } else {
                    spans[i].className = 'day2 holiday';
                }
            } else if(dc.isSaturday(year, month, day)) {
                if (dc.isToday(year, month, day)) {
                    spans[i].className = 'day2 tsaturday';
                } else {
                    spans[i].className = 'day2 saturday';
                }
            }
            if(dc.isToday(year, month, day)) {
                spans[i].className = 'day2 today';
            }
        }
    }
}
var dc = new dayChecker();
setWeekendAndHoliday();
//-->
</script>

６．CSS修正

下記のセレクタをスタイルシートに追加してください。

.holiday,
.holiday a:link {
    color: #e50003;
}
.saturday,
.saturday a:link {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link {
    color: #0000ff;
}
.today {
    display: inline;
    color: #444444;
    border: 1px solid #444444;
}

当ブログの「FC2 ブログテンプレート」をご利用の場合は、既存の下記の設定を削除してください。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

削除しないと、当日の表示枠が横いっぱいにひろがってしまいます。下は10月6日が当日の例です。左右をトリミングしていますが、10月6日を囲んでいる枠が左右にひろがってしまっています。

当日表示がひろがった例

以上です。

Comments [6] | Trackbacks [0]
2006年5月 9日

休日表示付リアルタイムカレンダー for FC2ブログ

May 9,2006 11:51 PM
Tag：[, ]
Permalink

FC2ブログ用休日表示付リアルタイムカレンダーFC2 ブログのテーブルタイプのカレンダーに土・日・休日・本日を表示するカスタマイズです（横型には対応していません）。ここでは公開テンプレートに対するカスタマイズをご紹介しますが。CSSを変更すれば他のテンプレートでもご利用可能です。
スクリーンショットはFC2ブログに設定した完成例です。表示・動作はこちらでご確認ください。

またカレンダースクリプトをオブジェクト指向プログラミングに変更してみました。

１．休日表示用カレンダースクリプトのダウンロード

下記の download をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．スクリプトのアップロード

ダウンロードした dayChecker.js をFC2ブログの「ツール」→「ファイルのアップロード」機能を使ってアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記の設定を追加してください。

<script type="text/javascript" src="<%url>file/dayChecker.js" charset="utf-8"></script>

dayChecker.js の文字コードは utf-8 で作成してますが、FC2ブログの文字コード（EUC）に変更してアップロードする場合、上記のタグは charset 属性を省いた形で設定してください。

４．テンプレートの修正２（カレンダー表示部分）

カレンダーを表示したい部分に、下記のカレンダー表示タグおよびカレンダースクリプト実行用のスクリプトを追加してください。

<!-- カレンダー開始 -->
<div class="side">
<div class="calendar">
<table summary="<%now_year>/<%now_month>">
<caption class="calendarhead">
<a href="<%prev_month_link>" title="<%prev_month>月のページへ"><</a> 
<%now_year>年<%now_month>月
 <a href="<%next_month_link>" title="<%next_month>月のページへ">></a>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">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="blue">Sat</span></span></th>
</tr>
 
<!--calender-->
<tr>
<td class="day"><%calender_sun></td>
<td class="day"><%calender_mon></td>
<td class="day"><%calender_tue></td>
<td class="day"><%calender_wed></td>
<td class="day"><%calender_thu></td>
<td class="day"><%calender_fri></td>
<td class="day"><%calender_sat></td>
</tr>
<!--/calender-->
 
</table>
</div>
</div>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
function setWeekendAndHoliday() {
    var elements = document.getElementsByTagName("table");
    var element = elements[0].getAttribute("summary");
    var year = element.split("/")[0];
    var month = element.split("/")[1];
    var spans = elements[0].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;
            }
            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');
            }
        }
    }
}
var dc = new dayChecker();
setWeekendAndHoliday();
//-->
</script>

５．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;
}

以上です。

2007.04.21 追記
春分の日・秋分の日の振替休日が表示されない不具合を修正しました。

Comments [14] | Trackbacks [4]
Now loading...
Introduction
List of "カレンダー"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.02