●休日表示付リアルタイムカレンダー カスタマイズ大苦戦！
久々に小粋空間さんにカレンダーのカスタマイズの記事を発見。
休日表示付リアルタイムカレンダー for Movable Type
早速トライしてみましたが、なかなか上手くいきません。 今回のカスタマイズは手ごわいようです。 何回かyujiroさんやその他の方にアドバイスしてもらって何とか休日表示できるようになりました。 でもエントリーのあった日は、休日表示の色にならないのです。 スタイルシートを色々いじくってみましたが解決しません。 やっぱりもっと勉強しないと駄目ですね。
当方のカレンダーテンプレートは以下の通りです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1./ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /><title><$MTBlogName$></title> <link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" /><MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense><script language="JavaScript" type="text/javascript" src="<$MTBlogURL$>dayChecker.js" charset="utf-8"></script>
</head>
<body ><div id="links">
<div class="calendar">
<table summary="<$MTArchiveDate format="%Y/%m"$>"><caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>calendar/<MTArchiveDate format="%Y/%m/index">.php">＜</a>
</MTArchivePrevious><$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="<MTBlogURL>calendar/<MTArchiveDate format="%Y/%m/index">.php">＞</a>
</MTArchiveNext>
</caption><tr height="15">
<th abbr="Sunday" align="center" valign="bottom"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday" align="center" valign="bottom"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center" valign="bottom"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center" valign="bottom"><span class="calendar">Wen</span></th>
<th abbr="Thursday" align="center" valign="bottom"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center" valign="bottom"><span class="calendar">Fri</span></th>
<th abbr="Saturday" align="center" valign="bottom"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr><MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center"><span class="calendar"><MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries></span>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar></table>
</div>
</div><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>
</body>
</html>
コメント
こんにちは！
同じく小粋空間さんにお世話になり、カレンダーのカスタマイズをしたchiffonです。
エントリーのある休日の色ですが、カレンダーのスタイルシートで
#links a {～～}
と
#links a:hover {～～}
のそれぞれ「#links」を 取ったら私は直りました。
参考までに。。。。
Posted by: chiffon | 2006年3月25日 17:08
chiffonさん 解決しました！ アドバイスありがとうございました。
Posted by: harry | 2006年3月25日 17:23