[教學] 在Blogger中加入日曆功能！Tag：Blog、教學

有網友E-Mail問我TonyChou Walker中的日曆功能該怎麼用？(其實可以在本Blog上留言問就好了...)這是個很好的問題～所以我在這裡介紹一下這個程式，其實這個"很棒"的好用日曆是在 笨蛋壩子的隨筆 中挖到的"寶"，我之前曾經用過一個比較"陽春"的日曆，叫做 Bloglendar，由於功能"無法符合"我的需求，沒有月份切換的功能所以就沒用了，除此之外還有一個更棒、更華麗的月曆可以在 ecmanaut 看到～但是似乎"有點"耗資源，不夠簡單、大方？所以我並沒有用，有興趣的可以試看看！

重點來了！本站使用的日曆主要分成三個部份：CSS、JavaScript、Sidebar顯示處...只要將這些語法"依照以下步驟"複製後貼在Blogger Template中"適當位置"就可以了...

---

一、CSS：

/* Calendar v0.3 */
#Calendar {
border:1px solid #222;
margin:0px;
}
#Calendar caption {
Font-Family:'trebuchet ms', helvetica, arial, sans-serif;
font-weight: bold;
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 {
color: #AADD99;
text-decoration:none;
}
#CalendarTable table {
border-collapse:collapse;
padding:0px;
border: 0px;
}
#CalendarTable table th {
font-family:Arial;
font-size:13px;
padding: 1px;
color:#777;
margin: 0;
}
#CalendarTable table td {
font-family:Arial;
font-size:13px;
width:25px;
height:25px;
border: 1px solid #444;
color:#777;
text-align:center;
padding: 1px;
margin: 0;
}
#CalendarTable table td a {
display: block;
}
#CalendarTable .Today {
background: #444;
color: #00AAFF;
}
#CalendarTable .Today a {
}
#CalendarTable .Lastday {
}
#Calendar .act {
color:#000;
padding:4px;
}

以上的CSS部份完全是以本站為例，是"黑色"背景為底的，請"自行調整"以配合自己的版面配色為主...通常CSS的設定部份是在Template中的"<style>"標籤之中...

---

二、JavaScript：

<!-- Calendar v0.3 Begin -->
<script language="javascript" type="text/javascript">
var week_label = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var month_label = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
var month_days = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var today = new Date();
var cur_day = new Date();

var blogarchivename = new Array ();
var blogarchiveurl = new Array ();
var thisarchive = 0;

<BloggerArchives>
blogarchivename.push("<$BlogArchiveName$>");
blogarchiveurl.push("<$BlogArchiveURL$>");
</BloggerArchives>

for (var x in blogarchivename)
{
blogarchivename[x] = blogarchivename[x].slice(0,4) + blogarchivename[x].slice(5,7) +blogarchivename[x].slice(8);
}

function YearMonth(date_obj)
{
year = date_obj.getFullYear();
thisMonth = month_label[date_obj.getMonth()];
out = year+'-'+thisMonth;
return out;
}

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

nDays = 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);
//get the day of the week (0~6)
startDay = IsitNow.getDay();
var out='';
out+='<table>';
out+='<tr>';
for (var index=0;index<7;index++)
{
out+='<th>'+week_label[index]+'</th>';
}
out+='</tr>';

thisarchive=0;
while (thisarchive <= blogarchivename.length -1)
{
if(blogarchivename[thisarchive].slice(0,4) == year && 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"> </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 && today.getMonth()==date_obj.getMonth() && today.getFullYear()==date_obj.getFullYear())
{
out+='<td class="Today">';
if (thisarchive < blogarchivename.length && blogarchivename[thisarchive].slice(4,6)==thisMonth &amp;& blogarchivename[thisarchive].slice(6,8)==archiveday)
{
out+='<a href="'+blogarchiveurl[thisarchive]+'" target="_top">'+index+'</a>';
thisarchive++;
}
else
{
out+=index;
}
out+='</td>';
}
else
{
out+='<td class="Lastday">';
if (thisarchive < blogarchivename.length && blogarchivename[thisarchive].slice(4,6)==thisMonth &amp;& blogarchivename[thisarchive].slice(6,8)==archiveday)
{
out+='<a href="'+blogarchiveurl[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"> </td>';
}
out+='</tr>';
}
out+='</table>';
return out;
}

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

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

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

function refreshTable()
{
document.getElementById('CalendarMonth').innerHTML = YearMonth(cur_day);
document.getElementById('CalendarTable').innerHTML = Calendar(cur_day);
}
</script>
<!-- Calendar v0.3 End -->

以上JavaScript最大的關鍵之處就是"紅色"的部份，重點是有兩個地方必須先至Blogger的管理介面去設定：

1. 設定 --> 格式 -->「把索引日期格式存檔」設定為 「2006-07-30」
2. 設定 --> 存檔 -->「存檔頻率」設定為「每日」

通常JavaScript加入的部份是在Template中的"</head>"標籤之前即可！

---

三、Sidebar顯示處：

<table border="0" align="center" cellpadding="0" cellspacing="0" id="Calendar">
<caption>
<a href="javascript:;" class="today" onClick="GoToday();" style="color:#00FF00;">Today</a>
<a class="other" href="javascript:;" onClick="PrevMonth();" style="color:#FFFF00;">&laquo;</a>
<span id="CalendarMonth" style="background: #444;"></span>
<a class="other" href="javascript:;" onClick="NextMonth();" style="color:#FFFF00;">&raquo;</a>
</caption>
<tr>
<td class="act" id="CalendarTable"></td>
</tr>
</table>
<script type="text/javascript">
refreshTable();
</script>

<div style="text-align:center;">
Archives：<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</div>

其中"紅色"的部份代表"下拉式選單"，其實並不重要～可以不用加入，基本上照著以上的步驟就可以替Blogger加上日曆功能了！如果有任何問題歡迎提出來，也可以參考一下延伸閱讀中的相關資料～

延伸閱讀：

1. 笨蛋壩子的隨筆: 在Blogger上安插月曆( Calendar)
2. 笨蛋壩子的隨筆: 微調在 blogger 上的月曆
3. Petersky's Place: 為 Blogger 加上 Bloglendar
4. ecmanaut: Adding calendar navigation to your Blogger template

Technorati Tags: BloggerTemplate, 教學

相關文章：