查高鐵時刻表的時候發現他們用的 JS calendar 還滿不錯的，可以透過鍵盤控制，因此我也想要在程式裡放一個。
首先要到 JS Calendar 的官網下載原始碼。
下載好以後，解壓縮放到你高興的地方，像我就習慣開一個叫做 jscript 的資料夾，在裡面分別設不同的資料夾放不同的套件（TinyMCE, jQuery & jQuery UI...etc.），這樣才不會大家都混在一起。我把 JS Calendar 解壓縮成 jscalendar-1.0 資料夾，放到我的 jscript 裡頭，在網頁的 <head> 裡面加上 JS Calendar 的主檔、語系檔、設定檔。
<script type="text/JavaScript" src="../jscript/jscalendar-1.0/calendar.js"></script>
<script type="text/JavaScript" src="../jscript/jscalendar-1.0/lang/calendar-big5-utf8.js"></script>
<script type="text/JavaScript" src="../jscript/jscalendar-1.0/calendar-setup.js"></script>
外觀的部分內建有 11 種主題可以使用，都不愛的話也可以自己改 CSS。懶人如我是直接看官網上的範例套用的結果（點右上角的 Theme 的名稱，右邊那個日曆就會馬上顯示出套用的樣子來），選一個和現在的網頁樣式搭配的來用。我選的是 winter 這個 theme，把 CSS 設定寫在 <head> 裡面，產生出來的日曆控制項。（網站上示範的 "blue" theme 是對應到 calendar-blue2.css）
<link type="text/css" href="../jscript/jscalendar-1.0/calendar-blue.css" rel="Stylesheet" />
然後我想要點選一個日曆小圖示來呼叫 JS Calendar，並且在一個 text 裡頭取得日曆文字的 text。以 ASP.net 來說，就是拉一個 TextBox 和 Image 物件到頁面上。
<asp:TextBox ID="txtCalendar" runat="server" />
<asp:Image ID="imgCalendar" runat="server" ImageUrl="~/images/calendar.gif" AlternateText="小日曆" />
如果你是 pure HTML / PHP / JSP，可能會寫成這樣：
<input type="text" name="date" id="txtCalendar" />
<img src="../images/calendar.gif" id="imgCalendar" alt="小日曆" />
擺好你的文字方塊和小圖片以後，就可以來把 JS Calendar 和它們的關聯建立起來了。請記得在這些物件之後再放上以下的 JavaScript，不然物件還沒有產生，在 Calendar.setup 執行時它會執行 document.getElementById 來找你的文字方塊和小圖片，這時就會出現 null 之類找不到物件的錯誤（因為文字方塊和小圖片之後才生出來嘛）。
<script language="javascript" type="text/javascript">
Calendar.setup({
inputField: "<%=txtStart.ClientID%>",
ifFormat: "%Y/%m/%d",
button: "<%=imgStart.ClientID%>",
align: "Tl",
singleClick: true
});
</script>
以上面這串 JSON 來說，
inputField 指向的就是接收日期字串的 TextBox；
ifFormat 是你要產生的日期格式，我這邊只產生 2009/04/01 這種格式的字串，你高興的話可以產生時、分、秒；
button 則是點下去會呼叫日曆控制項的物件，可以是圖片也可以是按鈕；
align 是對齊的方式，預設是對齊 button 的左下方，大小寫有別，請參考官方說明文件的 5.3.11 這節。
在 inputField 和 button 的 ID 這部分，如果不是 ASP.net，這邊就直接填 text 和 img 的 ID 就好，我是因為放在 MasterPage 的某個內容子頁裡，所以必須讓它轉成 ClientID。
這樣就設定得差不多了，然後這時候就可以點日曆小圖示來喚醒你可愛的 JS Calendar。不過在這時候這個日曆控制項也爆炸了。
摸摸鼻子在 Google 下關鍵字「jscalendar undefined」，找到了一條明路、以及再一條明路。總之，就是在你引用的語系檔最後面加上「Calendar._FD = 0;」，以我的情況來說就是找出 jscript/jscalendar-1.0/lang 資料夾裡的 calendar-big5-utf8.js 這個檔案，在檔尾加上這行設定值。然後可愛的日曆控制項又活過來了。
像我有個頁面要設定一段時間，所以得有兩個日曆控制項，這時候就是在裡頭寫兩遍 Calendar.setup()，在這兩個 Calendar.setup() 裡頭把 inputField 和 button 分別設給兩組不同的物件就可以了。
其實網路上的 JavaScript Calendar 很多，各種日曆控制項各有優點，不過像我在用 jQuery UI 裡的 datePicker 時，就遇到它在 thickbox 裡垂直位置不正確的問題，看了原始碼，原因是因為產生日期控制項時，垂直位置是透過捲軸的總長度來計算的，但是 datePicker 沒有正確抓到 iframe 的捲軸長度、反而抓到了外圍的視窗捲軸長度，導致位置不正確。我回報了這個 bug，不過它的 milestone 設在 1.8 版（現在才 1.7.1），所以只好物色新的日曆控制項來換了。
改用 JS Calendar 有效地解決了這個問題。它的位置似乎是以 button 的位置來換算的（沒時間看原始碼，純屬不負責任猜測，有錯歡迎指正XD），所以用在 thickbox 裡也沒有像 jQuery UI 的 datePicker 那樣往高空亂飛。
除了位置正確、可以鍵盤操作，我還滿喜歡這個控制項可以任意拖曳 (drag)、可以讓使用者自己決定一週的第一天是哪天（點一下最上面的星期幾，就可以馬上 render 出以它為一週之首的日曆來），產生的速度也很快，不過我看很多人的程式還是都習慣自己刻一個日曆控制項，不知道為什麼……希望這個小玩具不要有地雷。 XD
留言列表
文書處理 (5)