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

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

Posted at May 9,2006 11:51 PM
Tag:[Calendar, FC2]

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

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

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

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

download

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

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

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

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

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

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

4.テンプレートの修正2(カレンダー表示部分)

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

<!-- カレンダー開始 -->
<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>

5.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 追記
春分の日・秋分の日の振替休日が表示されない不具合を修正しました。

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


トラックバック

忍者ブログ版休日表示カレンダー from 徒然日記
今このサイトでは横並びのカレンダーと通常の形状のカレンダーを表示させていてちょっとヘンな状況だったりしますが、これには訳がありまして、これ、ちゃんと休日を... [続きを読む]

Tracked on August 27, 2006 12:55 AM

休日表示カレンダー from kisatonomori blog
小粋空間: 休日表示付リアルタイムカレンダー for FC2ブログ 休日表示用カレンダースクリプトdayChecker.jsファイルを ダウンロード ... [続きを読む]

Tracked on March 2, 2007 8:21 PM

th 要素の abbr 属性に関する大量の誤解 from Out of Memory
th 要素の abbr 属性に関する大量の誤解 [続きを読む]

Tracked on July 4, 2008 11:20 AM

th 要素の abbr 属性に関する誤解 from Out of Memory
th 要素の abbr 属性に関する誤解 [続きを読む]

Tracked on July 4, 2008 11:21 AM
コメント

こんばんは。
何度かコメント送ってるのですが、エラーになってしまいます。
もし何度も届いてましたらお許し下さいね^^;

テンプレートをお借りしたその節は大変お世話になりました。
今度テンプレートの下地を白から黒にしようかと思ってまして
試しに下地を黒にしてみたらカレンダーの平日の文字が
黒になっている様で表示(見えない)されません。
カラー指定部などを色々いじってみたり探してみたのですが
どの部分を変えたらいいのか?それとも出来ないのか?
さっぱり分かりませんでした^^;
もし方法がありましたら是非教えて頂きたくコメントしました。
大変ご多忙と存知ますが、いつでも結構ですので教えて下さると
本当に助かります。どうぞ宜しくお願い致します。

[1] Posted by XLママ : February 8, 2007 9:39 PM

>XLママさん
こんばんは。
ご質問の件ですが、下記の赤色のようにしてください。

.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #ffffff;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #ffffff;
    background: none;
}

それではよろしくお願い致します。

[2] Posted by yujiro : February 8, 2007 10:46 PM

お忙しい中お返事ありがとうございました。
私の説明不足でした。書き方を間違ったみたいで失礼致しました。
教えて頂いた部分は分かったのですが
その下の平日部分の数字の変更部分が分かりません。
ちなみに変更しているブログのURLを今回、明記しましたので
もし良かったら症状を見て頂けると分かりやすいかな?と思います。
変更中なのでブログは閉じて(プライベートモード)ますが
パスワードは「8899」となりますのでご面倒ですが入力して
下さると嬉しいです。
本当にご面倒おかけしますがどうぞ宜しくお願い致しますm(_ _)m

[3] Posted by XLママ : February 9, 2007 12:21 AM

>XLママさん
こんにちは。
IEでの確認がもれてました。失礼いたしました。
ご連絡頂いたサイトであれば

.day {
    color: #808080;
}

を追加することで表示されました。
それではよろしくお願い致します。

[4] Posted by yujiro : February 9, 2007 11:30 AM

こんにちは。
出来ました?♪yujiroさん本当にありがとうございました^^
yujiroさんのテンプレート凄く気に入っているので
「変えないとダメなのかな?」って消沈してましたけど
勇気を出して質問して本当に良かったです♪
本当に本当にありがとうございました。
今後もどうぞ宜しくお願い致します。

[5] Posted by XLママ : February 9, 2007 12:46 PM

>XLママさん
こんにちは。
こちらの確認不足で余計な気を遣わせてしまい、申し訳ありませんでした。
遠慮せずにご質問くださって結構ですよ。

とりあえずうまくできたようで良かったです。
こちらこそ今後ともよろしくお願い致します。

[6] Posted by yujiro : February 9, 2007 3:14 PM

はじめまして!ライデンと申します。
ご多忙の中申し訳ございませんが、差し支えなければご回答お願いします。

5.CSS修正でセレクタをスタイルシートのどの部分に入れたら良いのでしょうか。

4.テンプレートの修正2までは完了しカレンダーが表示されるようになりました。

自分のブログの背景は黒です。
念のためブログのスタイルシートの
table.calender
から
.calender td a:hover
のあたりを入れ替えてみましたが
変化がありませんでした。

よろしくお願いします。

[7] Posted by ライデン : October 22, 2008 1:24 PM

>ライデンさん
はじめまして。
ご質問の件ですが、5.CSS修正でセレクタはスタイルシートの後半に入れてみてください。
サイトを拝見させて頂かないと適切な回答ができないため、うまくできないようであればサイトのURLをご連絡ください。
それではよろしくお願い致します。

[8] Posted by yujiro logo : October 25, 2008 2:30 AM

yujiro様、返信がかなり遅くなりましてすみません。

七転八倒してなんとか解決できました。
どうも有難うございました。

[9] Posted by ライデン : November 7, 2008 10:33 AM

●いつもお世話になっております。
この度、「休日表示付リアルタイムカレンダー for FC2ブログ」を当サイトで利用させていただこうと思いまして、ここに書いてある手順で設置してみたのですが、上手く土・日・休日・本日が表示されませんでした・・・・。
また、サンプルが表示されているhttp://koikikukan.blog42.fc2.com/のページでも上手く動いていないようなので、一度ご確認していただければと思いまして、この度連絡を差し上げました。
お忙しい中、恐縮ですがどうぞよろしくお願いいたします。

[10] Posted by シロクマ : July 14, 2009 12:28 AM

>シロクマさん
こんばんは。
ご返事遅くなりすいません。
ご質問の件ですが、別途ご返事致しますので、すいませんがもうしばらくお待ち頂けますでしょうか(週末は時間がとれないため来週になります)。
それではよろしくお願い致します。

[11] Posted by yujiro logo : July 25, 2009 4:56 AM

yujiro様へ

返信ありがとうございます。
「Movable Type」を使った現状のシステムでは、XREA+サーバーへの負担が抑えることができず、コアサーバーへ移転したとしても、今のままでは運営は困難だと言われ、同じサーバーを利用している他の利用者の方にも迷惑を掛けてしまうので、この度FC2ブログへ移転を決意しました。

そこで、いつも利用させていただいているyujiro様のテンプレートとカレンダーを今回も使用させてもらったのですが、「休日表示用カレンダースクリプト」が上手く動作しなかったので、お忙しい中恐縮ですが今回お問い合わせをさせていただきました。

自分の設定に何か不備があるのかと思い、他に新しいブログを用意して、再確認を行ってみたのですが、やはり、上手く動作してくれないのです・・・(ノ(エ)・、)

このスクリプトを今回の移転先でもぜひ利用させていただきたいと思っているので、お忙しい中本当に恐縮ですが、ゆっくり時間の取れる時にでも、どうぞよろしくお願いいたします。

[12] Posted by シロクマ : July 25, 2009 11:19 AM

>シロクマさん
こんにちは。
ご返事遅くなってすいません。
貴サイトを確認したところ、特に設定は問題ないようなのですが、外部ファイルを読み込まない動作になっているようで、その結果、表示が変わらないようです。他のスクリプトをすべて削除しても動作しないので、干渉しているわけでもありません。

ただ、当ブログのサンプルの外部ファイルを読み込ませれば正常に動作するので、まずは外部ファイルのURLをそれぞれ以下のURLに設定し直して、正常に動作するか確認してもらえますでしょうか。

dayChecker.js
http://blog-imgs-13.fc2.com/k/o/i/koikikukan/dayChecker.js

setWeekendAndHoliday.js
http://blog-imgs-40.fc2.com/k/o/i/koikikukan/setWeekendAndHoliday.js

上記でも動作しない場合、申し訳ありませんがテンプレートに JavaScript の内容を設定してみてください。
それではよろしくお願い致します。

[13] Posted by yujiro logo : August 11, 2009 6:19 PM

yujiro様へ

お忙しい中、時間を割いて回答してくださりありがとうございます。
提示していただいたdayChecker.jsとsetWeekendAndHoliday.jsを入れ替えしてみても改善しなかったので、カレンダーをとりあえず、左上に持っていってみたところ、上手く動作するようになりました。
どうやら、他のスクリプトと干渉していたようで、右下にカレンダーを移動させ、他のスクリプトのON/OFFを切り替えて、干渉しているスクリプトを探し出しました。
その結果、メイキーPlusのソーシャルブックマーク(ブックマーク)とi2iの逆アクセスランキング、js-kitのRatingにNavigator、人気ーページランキングの5つスクリプトが干渉していることが分かりました・・・。
こんなにあちこちのスクリプトが干渉していると、やはり左上にカレンダーを設置するしか打開策は無いのかなと思っているのですが、私としては、右上にカレンダーを設置したいと思っているので、どうにかならないでしょうか?
お忙しい中大変恐縮ですが、何か良い案がありましたら、再度ご教授いただけないでしょうか。
よろしくお願いいたします。

[14] Posted by シロクマ : August 15, 2009 10:52 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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