Top > CMS・ブログ > FC2ブログ > カスタマイズ > カレンダー > 2008年10月
2008年10月 7日

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

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

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

当日表示がひろがった例

以上です。

Comments [6] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3