2006-07-14

在Blogger上安插月曆( Calendar) - IE 修正版


網頁再各瀏覽器間的相容性真是一件棘手的事情。感謝 shizo網友的提醒,原來我的 blog 在 IE 上的顯示有點問題,日曆並無法正常的顯示出來。由於用慣了 Firefox ,忘記用 IE 去測試才沒有注意到此情形。現在已經修正完畢了,應該可以在 IE 上正常顯示了。

其實在上次這篇 在Blogger上安插月曆( Calendar) 教學文章之後,我對於這個日曆小程式的程式碼又做了一些小修改,主要是將他物件化,並讓我的 blog 網頁儘可能的合乎 xHTML 。而造成 IE 上無法瀏覽的主因就在於在修給為 xHTML 網頁時在 script 這個標籤內,我將原本的
 <script type="text/javascript">
<!--

修改為
 <script type="text/javascript">
//<![CDATA[
<!--

沒有把多餘的 <!-- 與結尾處相對應的 --> 標記拿掉,造成 IE 將所有包夾在內的 JavaScript 全部視為註解使得程式無法執行。有趣的就是在 Forefox 上會被正確的判斷。所以拿掉上面那兩個標記就可以解決在 IE 下無法正常顯示的問題了。新的程式碼與移植的方式簡略的說明如下:
首先要在範本放置 css 的地方插入下列 css 設定
/* Calendar v0.3
----------------------------------------------- */
#Calendar {
border:1px solid #222;
margin:0px;
}
#Calendar caption {
color:#fff
}
#Calendar caption a:link, #Calendar caption a:visited, #Calendar caption a:hover, #Calendar caption a:active {
color:#777;
text-decoration:none;
}
#Calendar caption today{
font-weight:light;
font-size:smaller;
}
#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{
text-decoration:none;
font-weight:bold;
Text-decoration:underline;
color: #fff;
}
#CalendarTable a:hover {
text-decoration:none;
}
#CalendarTable table {
border-collapse:collapse;
padding:0px;
border: 0px;
}
#CalendarTable table th {
font-family:Arial;
font-size:12px;
padding: 1px;
color:#777;
margin: 0;
}
#CalendarTable table td {
font-family:Arial;
font-size:12px;
height:25px;
border: 1px solid #444;
color:#777;
text-align:center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
color: #fff;
background: #444;
}
#CalendarTable .Today a {
}
#CalendarTable .Lastday {
}
#Calendar .act {
color:#000;
padding:4px;
}

完成之後,在 head 標記結束前,插入下列 javascript 的程式碼
<script type="text/javascript">
//<![CDATA[
function ArchiveCalendar()
{
this.PrevMonth=PrevMonth;
this.NextMonth=NextMonth;
this.GoToday=GoToday;
this.refreshTable=refreshTable;
this.YearMonth=YearMonth;
this.Calendar=Calendar;
this.archiveurl=archiveurl;
this.week_label = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
this.month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
this.month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
this.today = new Date();
this.cur_day = new Date();
this.blogarchivename = new Array ();
this.thisarchive = 0;
this.base='';
}

function archiveurl(idx)
{
url = this.base;
url+=this.blogarchivename[idx].slice(0,4) + '_' + this.blogarchivename[idx].slice(4,6) + '_' + this.blogarchivename[idx].slice(6) + '_';
var i=7;
while (this.base.slice(i,i+1) != '.')
{
url+=this.base.slice(i,i+1);
i++
}
url+='_archive.html';
return url;
}
function YearMonth(date_obj)
{
year = date_obj.getFullYear();
thisMonth = this.month_label[date_obj.getMonth()];
out = year+'-'+thisMonth;
return out;
}

function Calendar(date_obj)
{
year = date_obj.getFullYear();
thisDay = this.today.getDate();
thisMonth = this.month_label[date_obj.getMonth()];

nDays = this.month_days[date_obj.getMonth()];
if (date_obj.getMonth() == 1 &&(((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)))
{
nDays = 29;
}



IsitNow = date_obj;
IsitNow.setDate(1);
startDay = IsitNow.getDay();
var out='';
out+='<table>';
out+='<tr>';
for (var index=0;index<7;index++)
{
out+='<th style="width:25px;">'+ this.week_label[index]+'</th>';
}
out+='</tr>';

thisarchive=0;
while (thisarchive <= this.blogarchivename.length -1)
{
if(this.blogarchivename[thisarchive].slice(0,4) == year && this.blogarchivename[thisarchive].slice(4,6) == thisMonth)
{
break;
}
else
{
thisarchive++;
}
}

var tab_col=0;

for (index=0;index<startDay;index++)
{
if (tab_col==0) out+='<tr>';
out+='<td class="Lastday">&nbsp;</td>';
tab_col++;
}

var archiveday
for (index=1;index<=nDays;index++)
{
if (index<10)
{
index_day = new Date(year+'/'+thisMonth+'/0'+index+' 00:01');
archiveday = '0' + index;
}
else
{
index_day = new Date(year+'/'+thisMonth+'/'+index+' 00:01');
archiveday = index;
}

if (tab_col==0)
{
out+='<tr>';
}
if (index==thisDay && this.today.getMonth()==date_obj.getMonth() && this.today.getFullYear()==date_obj.getFullYear())
{
out+='<td class="Today">';
if (thisarchive < this.blogarchivename.length && this.blogarchivename[thisarchive].slice(4,6)==thisMonth && this.blogarchivename[thisarchive].slice(6,8)==archiveday)
{
out+='<a href="'+this.archiveurl(thisarchive)+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
{
out+=index;
}
out+='</td>';
}
else
{
out+='<td class="Lastday">';
if (thisarchive < this.blogarchivename.length && this.blogarchivename[thisarchive].slice(4,6)==thisMonth && this.blogarchivename[thisarchive].slice(6,8)==archiveday)
{
out+='<a href="'+this.archiveurl(thisarchive)+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
{
out+=index;
}
out+='</td>';
}

if (tab_col==6)
{
out+='</tr>';
tab_col=0;
}
else
{
tab_col++;
}
}

if (tab_col>0)
{
for (var si=0;si<(7-tab_col);si++)
{
out+='<td class="Lastday">&nbsp;</td>';
}
out+='</tr>';
}
out+='<tr><td colspan="7"><p style="font-size:75%;font-style:ltalic;text-decoration:none;text-align:right;"><a href="http://bartstalk.blogspot.com/2006/07/blogger-calendar-ie.html" style="color:#777;">Add this Calendar to your blog</a></p></td></tr>';
out+='</table>';
return out;
}

function PrevMonth()
{
thisMonth = this.cur_day.getMonth()-1;
year = this.cur_day.getFullYear();
if (thisMonth<0)
{
thisMonth = 11;
year = year-1;
}
thisMonth = this.month_label[thisMonth];
this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
this.refreshTable();
}

function NextMonth()
{
thisMonth = this.cur_day.getMonth()+1;
year = this.cur_day.getFullYear();
if (thisMonth>11)
{
thisMonth = 0;
year = year+1;
}
thisMonth = this.month_label[thisMonth];
this.cur_day = new Date(year+'/'+thisMonth+'/1 00:01');
this.refreshTable();
}

function GoToday()
{
this.cur_day = new Date();
this.refreshTable();
}

function refreshTable()
{
document.getElementById('CalendarMonth').innerHTML = this.YearMonth(this.cur_day);
document.getElementById('CalendarTable').innerHTML = this.Calendar(this.cur_day);
}
//]]>
</script>


最大的改變在於物件化,利用 ArchiveCalendar 這個自建的物件來顯示日曆。接下來就是在要放置日曆的位置插入下列程式碼:
 <table border="0" cellpadding="0" cellspacing="0" id="Calendar">
<caption>
<a href="javascript:;" class="today" onclick="Calendar.GoToday();">Today&nbsp;&nbsp;</a>
<a href="javascript:;" onclick="Calendar.PrevMonth();" >&lt;&lt;&nbsp;&nbsp;</a>
<span id="CalendarMonth"> </span>
<a href="javascript:;" onclick="Calendar.NextMonth();">&nbsp;&nbsp;&gt;&gt;</a>
</caption>
<tr>
<td class="act" id="CalendarTable"> </td>
</tr>
</table>
<script type="text/javascript">
Calendar=new ArchiveCalendar();
<BloggerArchives>
Calendar.blogarchivename.push('<$BlogArchiveName$>'.slice(0,4) + '<$BlogArchiveName$>'.slice(5,7)
+ '<$BlogArchiveName$>'.slice(8));
</BloggerArchives>
Calendar.base='http://bartstalk.blogspot.com/';
Calendar.refreshTable();
</script>


有一點要注意的就是要修改 Calendar.base='http://bartstalk.blogspot.com/'; 這行敘述,將裡面的網址改為你自己的 blog 位址 (開頭的 http:// 與 結尾的 / 都不可以省略),這樣就完工了,在 IE 上應該也可以正常顯示出日立囉。有任何的問題在與我聯絡吧。

20 則留言:

shizo 提到...

Calendar已經可以正常在IE、Firefox、Safari顯示了!真的太感謝你了!!謝謝^^

sneof 提到...
網誌管理員已經移除這則留言。
sneof 提到...

太感謝了,這個calendar還蠻簡單好用的
想請問一下,改字體或字的顏色,在第一段的css改就可以了嗎
謝謝 ^^

Bart 提到...

抱歉最近比較忙比較晚才回覆。要修改字體與顏色就是變更前面的 CSS 。字體只要不要太大版面應該還不會跑掉,顏色的話就可以隨喜好任意變換了。我看了一下你的 blog ,你可以試試看將
Calendar CAPTION 裡面的 Color 改為 #fff
CalendarTable A:link 裡面的 Color 改為#222;
這樣在白色底的畫面上顯示就會漂亮許多。
或是你也可以參考我另外一個 blog B & B,把網頁原始碼內 css 那段拿去用就可以了。

cat 提到...

唔知點解個日曆唔可以click返個日子去返個日gei文章到。到底問題出現在哪裡?之前更試過整個日曆看不到,但問題解決了,就到另一個問題出現,請幫忙想想法子。謝謝!

Bart 提到...

我看過你的 blog 了,是因為你 blog 存檔頻率設定不正確的關係。你可以參考我更舊的文章http://bartstalk.blogspot.com/2006/06/blogger-calendar.html
將blog存檔的「頻率」設定為「每日」,
「日期標題格式」設定為 「2006-06-20」
「把索引日期格式存檔」設定為 「2006-06-20」應該就可以了。對了,下次儘量用普通話我才看得懂喔。

匿名 提到...

感謝您的教學
請問一下這能在beta使用嗎?

匿名 提到...

hello, 怎樣都出不來耶,
不知怎麼了。

niccou 提到...

请问一下,这个日历的创建方法是不是不能在blogger beta里面用啊,我尝试了下,结果总是失败,请务必回复下啊。

匿名 提到...

請問可以在ftp發布的blogger上使用這個hack嗎

Thelma 提到...

Can you please write all the information in english? It would help a lot!!!

Thanks!

Pinocchio 提到...

Hi Bart,

先謝! 我已放了calender在我的blog上,但不知可否把size縮小一點?

小杜白雲 提到...

我照著做了...可是不能用吔!
只會出現TODAY和兩個箭頭而已..
所謂物件化是指可以用邊欄自由加入對吧!
又第二段程式碼的BLOG名稱要不要改?還是改第三段就好?
又前面兩段程式碼,是要展開時加入還是不用展開就加入.我兩種都試過吔

hsiao chuan 提到...

我也是出現TODAY和兩個箭頭
試了很久

Jerry 提到...

/* Calendar v0.3
-----------------------------------------------


這一段你說要放在CSS裏面,哪裏才算是CSS?怎麽找?

LVCHEN 提到...

壩子您好

我也試著將您這個漂亮的月曆放到我的部落格上,但我試了四個小時,還是弄不出來。Blogger 一直說我的XML格式錯誤,出現問題的是這一段
Calendar.blogarchivename.push('<$BlogArchiveName$>'.slice(0,4) + '<$BlogArchiveName$>'.slice(5,7)
+ '<$BlogArchiveName$>'.slice(8));
非常詭異的是,我用notepad++的XML checker,它也說那段格式錯誤,不能執行...不知道您有什麼看法。

momo 提到...

您知道要插入 mero (小水滴) 要放入哪個選項嗎
ex:http://mastercatkitchen.blogspot.com/ 右邊有三個meromero park 我也想放在自己的 blogger blog 裡 但我試過都無法放 請問你知道嗎

momo 提到...

另外請問我有試著發表一篇文章來測試 我的發布時間是錯誤的 請問我哪裡設定錯了

BrianLee 提到...

壩子您好

我每次弄都出現這訊息...一直搞不定...想請教一下該如何修正呢?

請修正下列錯誤,再重新提交您的模版。
我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The content of elements must consist of well-formed character data or markup.

keith 提到...

你好,
我照著你說的去做
可是只能顯示出最上方的兩個左右箭頭
所有數字都無法顯示, 不曉得是哪裡出問題呢?
希望可以給個幫忙一下...謝謝你^^"