http://www.537666.cn/it/article.asp?id=231
<html><head><meta http-equiv="Content-Language" content="zh-cn" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JCalendar 日曆控件</title>
<style type="text/css">...
#calendar {...}{
#calendar 
border-collapse:collapse; border:1px solid #06C; background-color:#FFF; width:160px; height:120px; font-size:12px; font-family:'Lucida Grande','Lucida Sans Unicode','宋體','新宋體',arial,verdana,sans-serif; cursor:default;
}#calendar td {...}{ text-align:center; vertical-align:middle; font-family:"宋體";}#calendar thead {...}{ background-color:#06C; color:#FFF;}#calendar div {...}{ width:100%; height:100%;}#calendar caption span {...}{ cursor:pointer;}#calendar #calendar_title {...}{ cursor:default;
}</style><script type="text/javascript">.../**//*************************** *JCalendar日曆控件 *@author brull *@email <img align="absmiddle" "src=image/email1.gif"><a href="mailto:[email protected]">[email protected]</a> *@date 2007-4-16 ***************************//**//* *@param year 年份 *@param month 月份 *@param date 日期 */ /**//*如果參數不足三個那麼就初始化爲當天日期*/function JCalendar (year,month,date) ...{ var _date = arguments.length == 0 ? new Date() : new Date(year,month-1,date); //實例變量 this.year = _date.getFullYear(); this.month = _date.getMonth() + 1; this.fday = new Date(this.year,this.month-1,1).getDay();//每月第一天的前一天星期數 this.dayNum = new Date(this.year,this.month,0).getDate();//每月的天數 //成員變量，當前年月日 JCalendar.cur_year = this.year; JCalendar.cur_month = this.month; JCalendar.cur_date = _date.getDate();}JCalendar.prototype.show = function()...{ var date = new Array(this.fday > 0 ? this.day : 0);//預先定義一段空數組，對應日曆裏第一週空的位置 var html_str = new Array(); var date_index = 0; var weekDay = ["日","一","二","三","四","五","六"]; for(var j = 1; j <= this.dayNum; j++)...{//初始化date數組 date.push(j); } html_str.push("<table id='calendar'>"); html_str.push("<caption><span title='上一年份' οnmοuseοver="this.style.color='#F90'" οnmοuseοut="this.style.color='#09F'" οnclick="JCalendar.update(-12);return false" style='color:#09F;font-size:16px;margin-right:5px;'>«</span><span title='上一月份' οnmοuseοver="this.style.color='#F90'" οnmοuseοut="this.style.color='#09F'" οnclick="JCalendar.update(-1);return false" style='margin-right:15px;color:#09F;'>▲</span><span id='calendar_title'>" + this.year + "年" + this.month + "月</span><span title='下一月份' οnclick="JCalendar.update(1);return false" οnmοuseοver="this.style.color='#F90'" οnmοuseοut="this.style.color='#09F'" style='margin-left:15px;color:#09F;'>▼</span><span title='下一年份' οnclick="JCalendar.update(12);return false" οnmοuseοver="this.style.color='#F90'" οnmοuseοut="this.style.color='#09F'" style='font-size:16px;margin-left:5px;color:#09F;'>»</span></caption>"); html_str.push("<thead><tr>"); for(var i = 0; i < 7; i++)...{//填充日曆頭 html_str.push("<td>" + weekDay[i] + "</td>"); } html_str.push("</tr></thead>"); html_str.push("<tbody>"); for(var i = 0; i < 6; i++)...{//填充日期 html_str.push("<tr>"); for(var j = 0; j < 7; j++)...{ tmp = date[date_index++]; tmp = tmp ? tmp : ""; if(JCalendar.cur_date == tmp) html_str.push("<td><span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span></td>"); else if(tmp == "") html_str.push("<td></td>"); else html_str.push("<td><div οnmοuseοver="this.style.backgroundColor='#CCC'" οnmοuseοut="this.style.backgroundColor=''" οnclick='JCalendar.click(this)'>" + tmp + "</div></td>"); } html_str.push("</tr>"); } html_str.push("</tbody></table>"); return html_str.join("");}//靜態方法JCalendar.update = function(_month)...{ var date = new Date(JCalendar.cur_year,JCalendar.cur_month - 1 + _month,1); var fday = date.getDay();//每月第一天的星期數 var year = date.getFullYear(); var month = date.getMonth() + 1; var dayNum = new Date(JCalendar.cur_year,JCalendar.cur_month + _month,0).getDate();//每月的天數 var tds = document.getElementById("calendar").getElementsByTagName("td"); for(var i = 7; i < tds.length; i++)//清空日曆內容 tds[i].innerHTML = ""; document.getElementById("calendar_title").innerHTML = year + "年" + month + "月";//更新顯示年月 //更新當前年月 JCalendar.cur_year = year; JCalendar.cur_month = month; for(var j = 1; j <= dayNum; j++)...{ if(j == JCalendar.cur_date) tds[6 + fday + j].innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span>"; else tds[6 + fday + j].innerHTML = "<div οnmοuseοver="this.style.backgroundColor='#CCC'" οnmοuseοut="this.style.backgroundColor=''" οnclick='JCalendar.click(this)'>" + j + "</div>"; } JCalendar.onupdate(year,month,JCalendar.cur_date);}JCalendar.onupdate = function(year,month,date)...{//日曆更改時執行的函數，可以更改爲自己需要函數,控件傳遞過來的參數爲當前日期 alert(year + "年" + month + "月" + date + "日");}JCalendar.click = function(obj)...{ var tmp = document.getElementById("c_today"); tmp.parentNode.innerHTML = "<div οnmοuseοver="this.style.backgroundColor='#CCC'" οnmοuseοut="this.style.backgroundColor=''" οnclick='JCalendar.click(this)'>" + tmp.innerHTML + "</div>"; JCalendar.cur_date = parseInt(obj.innerHTML); obj.parentNode.innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + obj.innerHTML + "</span>"; JCalendar.onclick(JCalendar.cur_year,JCalendar.cur_month,JCalendar.cur_date);}JCalendar.onclick = function(year,month,date)...{//點擊日期時執行的函數，可以更改爲自己需要函數,控件傳遞過來的參數爲當前日期 alert(year + "年" + month + "月" + date + "日");}</script></head><body><div id="calendar_contain"></div><script type="text/javascript">.../**//***************說明***************JCalendar.onclick (year,month,date)//點擊日期時執行的靜態函數，可以更改(或者覆蓋)爲自己需要函數,控件傳遞過來的參數爲當前日期JCalendar.onupdate (year,month,date){//日曆更改時執行的函數，可以更改(或者覆蓋)爲自己需要函數,控件傳遞過來的參數爲當前日期***********************************///一個例子JCalendar.onclick = function (year,month,date)...{ alert("today is:" + year + "-" + month + "-" + date);} document.getElementById("calendar_contain").innerHTML = new JCalendar().show();</script></body></html>