カレンダーを休日表示付カレンダーにしました~。ベースはもちろん
小粋空間さま:休日表示付リアルタイムカレンダー for Movable Type
でございます~。いつもお世話になりまくってます。ありがとうございました。
しかし案の定つまづきまして…(爆!)土日がちゃんと青や赤になったのに休日が赤にならず。そしてアップしたエントリー日に下線が!(これはスタイルシートの修正でなおりました)さらに30日が見あたらない!などなど。(これもスタイルシートでサイズを少しだけ広めにとって落ち着きました)デフォルトテンプレート用、公開テンプレート用、月送りカレンダーの2006.03.23 以前or以降、のどれかを混同して、何か余計なものをコピペしたか削除したかかな…?でも原因が見つからなーーい。
しばらく、ううーんって悩んでいたのですが、ハタとひらめいてに小粋空間にトラックバックされているサイトさまの中から同じ境遇(出発点が月送りカレンダー)のサイトさまを探して、お手本にしたところ、無事上手くいきました!参考にさせていただいたのは
Coffee Timeさま:月送りリアルタイムカレンダーに休日表示追加
でございます~。chiffonさま助かりました、どうもありがとうございました。
しかし相変わらず奇跡の神様頼みには変わらないような…(笑)結局、何が余計だったのかよくわかんないまま出来ちゃったんだけど、まっいっかぁ(こらー!)
以下、手順を覚え書き。
[1]休日表示用カレンダースクリプトのダウンロード
[2]スクリプトのアップロード
ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロード。この際、エンコードが utf-8 になってるかどうか再確認。(←うっかりこれに気付かず躓いてしまいました)
[3]カレンダーアーカイブテンプレートの修正
カレンダーアーカイブテンプレートの<head>~</head> の間に以下を挿入。
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>
[4]さらに下記をカレンダーアーカイブテンプレートの </body> の直前に追加。
<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
var elements = document.getElementsByTagName("table");
for (j = 0; j < elements.length; j++) {
var element = elements[j].getAttribute("summary");
var year = element.split("/")[0];
var month = element.split("/")[1];
if(!(year == y && month == m)){
continue;
}
var spans = elements[j].getElementsByTagName("span");
var day;
for (i = 0; i < spans.length; i++) {
if (spans[i].parentNode.nodeName == "TD") {
if(spans[i].innerHTML.indexOf("href") != -1){
day = spans[i].getElementsByTagName("a")[0].innerHTML;
} else {
day = spans[i].innerHTML;
}
if (isHoliday(year, month, day)) {
spans[i].setAttribute('class', 'holiday');
spans[i].setAttribute('className', 'holiday');
} else if(isSaturday(year, month, day)) {
spans[i].setAttribute('class', 'saturday');
spans[i].setAttribute('className', 'saturday');
}
if (isToday(year, month, day)) {
spans[i].parentNode.setAttribute('class', 'today');
spans[i].parentNode.setAttribute('className', 'today');
}
}
}
}
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
>
</script>
[5]カレンダー用スタイルシートに以下を加筆・訂正。
.today {
display: block;
background: #fcf; /* 本日の日付がピンクになる */
}
.holiday,
.holiday a:link,
.holiday a:visited {
color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
color: #0000ff;
}
[6]再構築しておしまい。
これでますます遊びの予定を立てやすくなりました(え?)わーいわーい♪(笑)
≪ Close?