[mooTools] Calendar - 可拖曳的月曆, 超美觀! mootools, Calendar, 月曆

wmh

Calendar: A Javascript class for Mootools
http://www.electricprism.com/aeron/calendar/
美觀又實用的月曆

先前曾經介紹過一篇 jQuery 月曆的用法，最近看到一位仁兄分享了許多新的風格(theme)，不過都大同小異，不怎麼美觀。因此今天特別介紹一下 mootools 這個漂亮的月曆，功能上絕不輸 jQuery 的月曆，快來看看範例吧：

有沒有覺得很棒呢？

對了，官方連結似乎沒有提供整個完整的下載包，因此我自己包了一個預設風格的壓縮檔給大家下載：
mootools_calendar.zip

使用方式非常簡單，先看看 HTML 的部份:

<div><input id="date" name="date" type="text" style="float: left" /></div>
<link rel="stylesheet" type="text/css" href="calendar.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.js"></script>

• 先建立一個 <input> id 為 date
• 引用了 css
• 引用 mootools.js，這是分享 Calendar 的這位仁兄包裝過的版本，包含了 Mootools 1.1 並且加上 Fx.Style、Element、Window 等功能。
• 引用 calendar.js

JavaScript 的部份是在 domready 事件執行 new Calendar():

window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y-m-d' }); });

new Calendar() 還有很多參數，這部份還請參考官方所提供的說明。

wmh

檢查看看是不是 CSS 有設定

wmh

那些應該是寫在 JavaScript 內的字串