返回列表 發帖

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

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() 還有很多參數,這部份還請參考官方所提供的說明
To infinity and beyond!

如果預設月份是當前月份就好了

TOP

試不出來

太悶了....一直搞不出來

有錯請指正
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">   
<title>moontool月曆測試</title>   
<!--JavaScript-->   
<script type="text/javascript" src="mooltool.js"></script>
<script type="text/javascript" src="calendar.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y/m/d' }); });
</script>
  
<!--JavaScript-->    
<!--CSS-->    
<link rel="stylesheet" type="text/css" href="calendar.css" />   
<!--CSS-->    
</head>   
<body>   
<input type="text" name="date" id="date" style="float: left">
  
</body>   
</html> 

TOP

mooltool.js→mootools.js 檔名打錯了...

TOP

請問我要如何才能改變text的大小? (我直接用"<input id="date" name="date" type="text" size="50" value="" style="float: left">"卻沒有反應耶 )
50 字節以內
不支持自定義 Discuz! 代碼

TOP

檢查看看是不是 CSS 有設定
To infinity and beyond!

TOP

嗯嗯~有! 找到了! 再這一段裡面:
...
input.calendar,
select.calendar {
        width: 130px;
}
...
另外,想請問目前星期的縮寫是S,M,T,W,T,F,S. 有人知道要在哪邊改這些縮寫嗎? 感恩
50 字節以內
不支持自定義 Discuz! 代碼

TOP

那些應該是寫在 JavaScript 內的字串
To infinity and beyond!

TOP

昨日在實作修改功能的時候~日期欄位的地方因新增資料的時候假設無填入日期資料資料庫預設為"0000-00-00"
所以在做修改的時候日期欄位echo 出來就是0000-00-00,點選拖曳月曆會失效!!
我想說是不是哪裡出問題,打開firfox錯誤主控台就發現JS錯誤關鍵字[J.month]
不過為了能交件~只好新增資料的時候日期部份預設必填欄位

TOP

請問為何寫於php中小圖示無法換行
會像是
|            |


echo "<TD><script type='text/javascript' src='js/mootools.js'></script>
          <script type='text/javascript' src='js/calendar.rc4.js'></script>
          <input type='text' name='date' style='float: left'  /><br>
                                  <head>
                    <script language=javascript type=text/javascript>
                  window.addEvent('domready', function() { myCal = new Calendar({ date: 'Y-m-d' }); });
                   </script>
                           <link rel='stylesheet' type='text/css' href='css/calendar.css' media='screen' />

</TD>" ;

TOP

返回列表 回復 發帖