休日表示付リアルタイムカレンダー（横型） for FC2ブログ
FC2 ブログの横型カレンダーに土・日・休日・本日を表示するカスタマイズです。
以前ご質問を頂いたもので、本エントリーにて紹介します。
テーブル型のカレンダーに休日表示を行う場合は「休日表示付リアルタイムカレンダー for FC2ブログ」を参照してください。
１．休日表示用カレンダースクリプトのダウンロード
下記の download を右クリックして「対象をファイルに保存」または「名前をつけてリンク先を保存」を選択し、休日表示用カレンダースクリプトをダウンロードします。ファイル名は dayChecker.js で保存してください。
２．スクリプトのアップロード
ダウンロードした 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日を囲んでいる枠が左右にひろがってしまっています。
以上です。
- 休日表示付リアルタイムカレンダー for FC2ブログ
はじめまして
dayChecker.js にバグ（というとちょっと失礼ですが）があります。
今年は９月２２日が祝日に挟まれているので休日になります。
dayChecker.prototype.isHoliday = function(year, month, day)
case 9:
に以下を追加して修正しました。
とりあえず去年と今年が正常に動作することは確認しました。
（制度開始年等その他細かいことはチェックしていません。）
修正よろしくお願いいたします。
/*敬老の日と秋分の日の間の休日*/
if(day-1 == (this.getFirstMonday(year, month) + 14)) {
if(year > 1979 && year < 2100) {
if (day+1 == parseInt(23.2488 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
return true;
}
if (day+1 == (parseInt(23.2488 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4)) + 1) && this.isSunday(year, month, day - 1)) {
return true;
}
}
}
度々すみません。
上記のコードのままでは一つ問題がありました。
呼び出し側で day を Number() か parseInt() しておく必要があります。
このままでは文字列に数値演算をすることになり、比較しても絶対に等しくなりません。
もう一つ目立たないバグを見つけました。
function setWeekendAndHoliday() の
if(dc.isToday(year, month, day)) は、
else if(dc.isToday(year, month, day)) にしておかないと、
class が tholiday, tsaturday になることはありません。
class today で上書きされてしまうからです。
お忙しいと思いますが、こちらも修正よろしくお願いいたします。
たぶん使いたい人たくさんおられるでしょうから。
＞CyberBabaさん
こんばんは。
たびたびのご連絡ありがとうございます。大変感謝しております。
修正は別途反映させたいと思います。
ではでは！
: January 5, 2009 1:43 AMどういたしまして
こちらこそ使わせていただき感謝しております。
なお敬老の日と秋分の日の間の休日のチェックは適当にしかやっていません。
（休日の制度がよく分かっていないので）
特にこの部分が心配です。
this.isSunday(year, month, day - 1)
たぶんもう一回 1 か 2 かなにかを引かないといけないような気がします。
くれぐれも上記のコードを過信しないようにお願いいたします。
