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

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

Posted at October 7,2008 12:03 AM
Tag:[Calendar, FC2]

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

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

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

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

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

download

2.スクリプトのアップロード

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

3.テンプレートの修正1(スクリプトのインクルード)

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

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

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

4.テンプレートの修正2(カレンダーの追加)

カレンダーを表示したい部分に、下記のカレンダー表示タグを追加してください。
当ブログで配布している「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>

5.テンプレートの修正2(休日表示用スクリプトの追加)

4項のタグより下(または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>

6.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日を囲んでいる枠が左右にひろがってしまっています。

当日表示がひろがった例

以上です。

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


コメント

はじめまして

dayChecker.js にバグ(というとちょっと失礼ですが)があります。
今年は9月22日が祝日に挟まれているので休日になります。

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

[1] Posted by CyberBaba : January 2, 2009 6:51 PM

追伸

来年も正常に動作します。
修正されたらコメントは削除をお願いします。

[2] Posted by CyberBaba : January 2, 2009 7:09 PM

度々すみません。

上記のコードのままでは一つ問題がありました。
呼び出し側で day を Number() か parseInt() しておく必要があります。
このままでは文字列に数値演算をすることになり、比較しても絶対に等しくなりません。

[3] Posted by CyberBaba : January 4, 2009 6:16 PM

もう一つ目立たないバグを見つけました。

function setWeekendAndHoliday() の

if(dc.isToday(year, month, day)) は、

else if(dc.isToday(year, month, day)) にしておかないと、

class が tholiday, tsaturday になることはありません。
class today で上書きされてしまうからです。

お忙しいと思いますが、こちらも修正よろしくお願いいたします。
たぶん使いたい人たくさんおられるでしょうから。

[4] Posted by CyberBaba : January 4, 2009 6:28 PM

>CyberBabaさん
こんばんは。
たびたびのご連絡ありがとうございます。大変感謝しております。
修正は別途反映させたいと思います。
ではでは!

[5] Posted by yujiro logo : January 5, 2009 1:43 AM

どういたしまして
こちらこそ使わせていただき感謝しております。

なお敬老の日と秋分の日の間の休日のチェックは適当にしかやっていません。
(休日の制度がよく分かっていないので)

特にこの部分が心配です。

this.isSunday(year, month, day - 1)

たぶんもう一回 1 か 2 かなにかを引かないといけないような気がします。
くれぐれも上記のコードを過信しないようにお願いいたします。

[6] Posted by CyberBaba : January 5, 2009 12:19 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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