休日表示付リアルタイムカレンダー for FC2ブログ
またカレンダースクリプトをオブジェクト指向プログラミングに変更してみました。 |
1.休日表示用カレンダースクリプトのダウンロード
下記の 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 追記
春分の日・秋分の日の振替休日が表示されない不具合を修正しました。
- 休日表示付きリアルタイムカレンダー for WordPress 日本語版
- 「休日表示付きリアルタイムカレンダー for WordPress」不具合のお知らせ
- Ajax 日めくりカレンダー(MT4版)
- Ajax 月送りカレンダー(MT4版)
- JavaScript カレンダー修正(春分の日・秋分の日の振替休日対応)
- Flash カレンダープラグイン(3.00 対応版) for Serene Bach
- カレンダーの日付リンクのジャンプ先をエントリー・アーカイブに変更する
- Ajax 月送りカレンダー(縦型)
- カレンダーの日曜と祝日のスタイルを別にする
- 「休日表示付リアルタイムカレンダー for livedoor ブログ」修正のお知らせ
- 休日表示付きリアルタイムカレンダー for WordPress
- Ajax 月送りカレンダー(横型)
- Ajax 月送りカレンダー
- 休日表示付リアルタイムカレンダー for livedoor ブログ
- 月送りカレンダー(簡易版・横型・休日表示付き)
- Flash カレンダープラグイン バージョンアップ
- Flash カレンダープラグイン for Serene Bach
- 月送りカレンダー(簡易版・休日表示付き)
- 休日表示付リアルタイムカレンダープラグイン(横型) for Serene Bach 不具合修正のお知らせ
≫ 忍者ブログ版休日表示カレンダー from 徒然日記
今このサイトでは横並びのカレンダーと通常の形状のカレンダーを表示させていてちょっとヘンな状況だったりしますが、これには訳がありまして、これ、ちゃんと休日を... [続きを読む]
こんばんは。
何度かコメント送ってるのですが、エラーになってしまいます。
もし何度も届いてましたらお許し下さいね^^;
テンプレートをお借りしたその節は大変お世話になりました。
今度テンプレートの下地を白から黒にしようかと思ってまして
試しに下地を黒にしてみたらカレンダーの平日の文字が
黒になっている様で表示(見えない)されません。
カラー指定部などを色々いじってみたり探してみたのですが
どの部分を変えたらいいのか?それとも出来ないのか?
さっぱり分かりませんでした^^;
もし方法がありましたら是非教えて頂きたくコメントしました。
大変ご多忙と存知ますが、いつでも結構ですので教えて下さると
本当に助かります。どうぞ宜しくお願い致します。
>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;
}
それではよろしくお願い致します。
お忙しい中お返事ありがとうございました。
私の説明不足でした。書き方を間違ったみたいで失礼致しました。
教えて頂いた部分は分かったのですが
その下の平日部分の数字の変更部分が分かりません。
ちなみに変更しているブログのURLを今回、明記しましたので
もし良かったら症状を見て頂けると分かりやすいかな?と思います。
変更中なのでブログは閉じて(プライベートモード)ますが
パスワードは「8899」となりますのでご面倒ですが入力して
下さると嬉しいです。
本当にご面倒おかけしますがどうぞ宜しくお願い致しますm(_ _)m
>XLママさん
こんにちは。
IEでの確認がもれてました。失礼いたしました。
ご連絡頂いたサイトであれば
.day {
color: #808080;
}
を追加することで表示されました。
それではよろしくお願い致します。
こんにちは。
出来ました?♪yujiroさん本当にありがとうございました^^
yujiroさんのテンプレート凄く気に入っているので
「変えないとダメなのかな?」って消沈してましたけど
勇気を出して質問して本当に良かったです♪
本当に本当にありがとうございました。
今後もどうぞ宜しくお願い致します。
>XLママさん
こんにちは。
こちらの確認不足で余計な気を遣わせてしまい、申し訳ありませんでした。
遠慮せずにご質問くださって結構ですよ。
とりあえずうまくできたようで良かったです。
こちらこそ今後ともよろしくお願い致します。
FC2 ブログのテーブルタイプのカレンダーに土・日・休日・本日を表示するカスタマイズです(

