[猴子專用]JSCalendar月曆安裝指引[/人類兼容]

這篇實在說不上是教學XD
只是一篇有圖的複製貼上說明(死
不過在教怎裝之前先教怎樣用吧XD


上面的是我的月曆
<和>是上和下一個月份
<<和>>是年份
"<"">"和"<<"">>"長按會顯示清單
移到清單上的日期再放開按鈕會跳到選擇的年/月份
按Today會回到按的那天(啥
按Sun至Sat會令那天變成一星期的第一天
按日子當然會顯示那一天的全部文章

之後就是主題了




注意:
請先把這篇完全看完至少一次才開始動手更改
並在修改前先備份自己的Template!

另外 以下的指引只供blogger空間使用
不保證在其他blog平台也能順利運作


在導入月曆之前 請先滿足以下條件:

(1).有一個可以放置並外連.js和.css檔的空間 一般免費空間應該都可以

(2).在這裏下載月曆(主體+樣式+語言檔)
  並把其中的calendar.js calendar-setup.js
  其中一個.css主題檔
  和lang資料夾中的其中一個語言檔上傳
  (關於語言檔和主題檔下面有補充)

(3).在Blogger的設定→格式中 把兩個日期的格式也改成年-月-日ISO格式 如下圖:



(4).同樣在設定→存檔中
  把存檔頻率設成每天:






這幾個都準備好之後就可以開始導入了

下面的全部也要做 但不一定要跟着步驟

(a).先到範本:



備份了之後再把以下的複製到<head></head>之間
任何位置也可以
但是建議放在</head>之前
日後管理會比較方便

<style type="text/css">@import url("http://空間位置/資料夾/theme.css");</style>
<script type="text/javascript" src="http://空間位置/資料夾/calendar.js"></script>
<script type="text/javascript" src="http://空間位置/資料夾/calendar-en.js"></script>
<script type="text/javascript" src="http://空間位置/資料夾/calendar-setup.js"></script>
<script type="text/javascript"><!--
function calendar()
{
var archive = document.getElementById( 'archive' );
if( archive )
{
archive.style.display = 'none';
var notes = {};
var links = archive.getElementsByTagName( 'a' );
if( !links.length ) return;
var i, j, node, date, y, m, d;
for( i=0; i<links.length; i++ )
{
node = links[i];
date = node.innerHTML.split('-'); // YYYY-MM-DD
y = parseInt( date[0], 10 ); if(!notes[y]) notes[y] = {};
m = parseInt( date[1], 10 ); if(!notes[y][m]) notes[y][m] = {};
d = parseInt( date[2], 10 ); notes[y][m][d] = node.href;
}
var dates = document.getElementsByTagName( 'h2' ), thisDate;
for( i=0; i<dates.length; i++ )
if( dates[i].className == 'date-header' )
{
var ymd = dates[i].innerHTML.split('-'); // YYYY-MM-DD
thisDate = new Date( parseInt( ymd[0], 10 ),
parseInt( ymd[1], 10 )-1,
parseInt( ymd[2], 10 ) );
break;
}
top.notes = notes;
Calendar.setup(
{
weekNumbers : false,
step : 1, // show every year in the year menus
date : thisDate, // selected by default
flat : 'calendar-container', // div element
range : [ parseInt(links[0].innerHTML), y ],
showOthers : true, // show whole first/last week of month
flatCallback : dateChanged, // what to do on date selection
dateStatusFunc: disableDateP // which dates to show/hide how
});
}
}

// Returns true for all dates lacking a note, false or a css style for those having one.
// Exception: today does not return true, even if it lacks a note. (improves navigation)
function disableDateP( date, y, m, d )
{
var now = new Date;
if( (y == now.getFullYear()) &&
(m == now.getMonth()) &&
(d == now.getDate()) )
return false;
return noteFromDate( date ) ? false : true;
}

function noteFromDate( date )
{
var note = top.notes[date.getFullYear()] || {};
note = note[date.getMonth()+1] || {};
return note[date.getDate()];
}

function dateChanged( calendar )
{
if( calendar.dateClicked )
{
var note = noteFromDate( calendar.date );
if( note )
window.location = note;
}
}//--></script>
<style type="text/css"><!--
#archive {display: none;}
#calendar-container {width:200px;}
--></style>


b.之後把<body>取代為:

<body onload="calendar()">


c.再在<MainOrArchivePage>
 把由<h2 class="sidebar-title"></BloggerArchives>的碼改成以下的:

<div id="codebox"><pre><div id="archive">
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveUrl$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</div>


d.最後 在想顯示月曆的地方貼上這段:
<div id="calendar-container"></div>


在上面的字碼中
http://空間位置/資料夾/取代為之前準備好的空間位置
如果在(2)中四個檔有改名的話在字碼中也要改回同檔名
特別是calendar-en.js這個
改用了其它語言檔的話就一定要改回
資料夾是非必要但也建議加上 同樣是為了方便管理

全部完成之後便可以儲存範本變更重新發佈整個blog:






關於語言檔和主題檔:
主題檔只需要上傳其中一個
各主題可以在jscalendar的index.html中先看看效果
用IE開啟的人記得要先允許ActiveX

網頁左邊的是彈出式月曆的示範 或許在以日期搜尋文章時有用

在總數11個主題檔中
在skins\aqua裏的theme.css可以令月曆有skin的效果
但是需要上傳整個資料夾的檔案
然而各個gif也可以改成自己喜歡的圖像
那就可以輕易造出自己的月曆skin了
各位也不妨試試
效果也同樣可以在index.html中看到


語言檔也是只需要一個
如果用英文的話當然沒問題
但是想用中文或其它語言的話就要注意了
在它提供的43個語言檔中
有一部份不對應這個版本的月曆
不過一般會用到的語言中
就只有日文不能使用
繁體和簡體中文也沒問題
但當中要注意的是繁體和簡體的語言檔也有兩個
分別在於編碼的不同
請就自己網頁的編碼使用合適的語言檔
而blogger對英文以外語言的預設編碼是UTF-8
也就是想用繁體中文的人用calendar-big5-utf8.js就行

以上就是基本的安裝指引

原教學: ecmanaut
月曆原網站:The DHTML / JavaScript Calendar




後記:

雖然是因為Blogger沒有月曆功能我才找其它的來用
但在比較過其它blog中的月曆後
發現這個JSCalendar有一個很大的優點
就是切換月/年份時不用把整個頁面重新整理
可以選好日期才直接跳到那天
省去了不少無謂的動作

而用這個月曆也是有缺點的
除了以前說過的
還有兩個更嚴重的

第一個就是javascript
雖然絕大部份人也有開啟瀏覽器對javascript的支緩
但是還人一部份是關閉的
而他們也未必知道自己電腦的設定
沒有使用javascript的話
別說是月曆 連工具提示也不能顯示
下面那個每天存檔的文章存檔連結也會長到爆XD

第二個是整合性
不管把月曆的外表弄得和Blog主頁如何融合
月曆主體還是寄存在不同的空間裏
萬一寄存的網絡空間出了甚麼狀況
就會出現和第一點一樣的結果
不過還有一個比較搞笑的情況
就是月曆主體載入成功但是主題的CSS檔載不下來
那麼月曆就會變成一堆黑字加一"條"個月份清單XDD
所以在選擇空間時也要考慮一下空間的隱定性

這篇要自己寫的不算多 但卻耗了我最多時間=[]=
時間主要是用在正確顯示程式碼上
本來打算只用<code>指令顯示出來
但是用來用去它也給我直接執行=[]=
之後就另尋方法
弄到現在用css把指定範圍加上半透明背景再保留格式
最後發現不能顯示的原因是我忘了不能直接打"<"和">"出來=[]=....
只要那兩個符號中間有認得出的指令
瀏覽器就會直接執行
雖然拜這所賜我為這裏加上新效果
但是居然連種錯誤也犯上了
嗚~~我好白癡(抱頭
果然是因為太熱了!!!(推卸責任

1 comment:

 
  levenshe

分享大家免費的年曆下載
向量圖,不失真。
各種尺寸大小A2、A3、A4、A5、A6
可以1:1輸出
大尺寸的可以貼掛於牆壁
小尺寸的適合放到筆記本內
陰曆陽曆對照,生肖
請自行下載需要的尺寸大小列印
若您需要的是月曆記事本手冊可以參考這裡
http://www.tgsc.com.tw/usb20/forumdisplay.php?fid=12&page=1

Post a Comment