轻量级漂亮日历控件 JCalendar，兼容IE&FireFox

上一篇 / 下一篇 2007-04-19 10:16:49
查看( 3083 ) / 评论( 25 )
最近做项目用到日历控件，到网上找了一些，发现要么就是兼容性不好，要么就是体积庞大，或者是接口不好，最后决定自己写一个。
写完发现还是可以的，不管是界面还是接口，代码还是易用性，至少我和别的对比是这样。大家pp，欢迎提出建议或者是bug。
稍微更新了一下下，从外观上让表格不会出现最后的空行，另外不再用讨厌的超级链接按钮（超级链接的虚线太讨厌）
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无忧脚本Jrn{e	m
<html xmlns="http://www.w3.org/1999/xhtml">无忧脚本H:V(oa
~j
<head>
2UO;M;[#Qqi0<meta http-equiv="Content-Language" content="zh-cn" />
}RH3F|/UO0<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
"I	dIO)R6D0<title>JCalendar 日历控件</title>无忧脚本lL},kP
<style type="text/css">
J7Hb#jc,h0#calendar {无忧脚本d9\!C-|nmeD'C7fe
        border-collapse:collapse;无忧脚本pUxc*k'|pM6R
        border:1px solid #06C;无忧脚本Lm	?:hw*W
        background-color:#FFF;
_a
cI[-u,YKs|.L Q0        width:160px;无忧脚本Ohs
MG1r0^A
        height:120px;

P&s"|aTu
q0        font-size:12px;
9z%X\1r1AUI0        font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
'dr4aZ&`T0        cursor:default;
2^+_5x*D^}ni0}无忧脚本b8h*b-l+X[!v
无忧脚本9M9r1BT"m_[
#calendar td {
St9H	{4no0        text-align:center;无忧脚本%y$o$HJ0F7mH:Ol
        vertical-align:middle;无忧脚本*c4I;{0gIX	x!~
        font-family:"宋体";
q(l`/}rjX"oY0}无忧脚本NW:J
l9a7kQU#B
无忧脚本US:[InI\B._6}
#calendar thead {无忧脚本u(m2w-bO0NhqC!p
        background-color:#06C;无忧脚本F R4umG-B
        color:#FFF;无忧脚本)v I4pF,X7i
}无忧脚本&]6e#E&j'nT,|.VQ_D

h6h:ZH#]Hw0#calendar div {无忧脚本b+u$CQ9o,a
        width:100%;
i'g{'G:Il"`8e0        height:100%;无忧脚本*RhU	gX-p9oQ-b6M(f
}
8J,nc)K3\U7N|G
~U0无忧脚本
`xpAX3s
#calendar caption span {
c,y}!}|0        cursor:pointer;无忧脚本j.[Q&H+x3~7^4X
}
_	~-Z `4A,UF0
B4S/MIDGz,[,l*{0#calendar #calendar_title {
zP~5jOy)IN%w0        cursor:default;
/}0?-q-J$g*k+L'sq0}
7@5Kbpb#D0</style>无忧脚本iy0oI@
V;PU
<scrīpt type="text/javascrīpt">
;wbJ~+|!E_i)o0/***************************无忧脚本
A]	}(\pt?lF
*JCalendar日历控件无忧脚本-rIL9q@0yvY
*@author brull
5I(rTqO+d
p0*@email [email]brull@163.com[/email]无忧脚本h7E|?x$Np#~UGh&h
*@date 2007-4-16无忧脚本%wY1}dCH.c$c	|
d
***************************/无忧脚本d5mP1W!B]0h:q-uRa%?

$b8R(e.Q0l!u~"R-w0/*
jdtd\#Q0*@param year 年份
Y6R&H
l7DB6u0*@param month 月份无忧脚本`'cP*SE'H[
*@param date 日期无忧脚本`'E|&U"VlwL
*/
"Q;Qx6MO0/*如果参数不足三个那么就初始化为当天日期*/
m%z8iw.J!}U\b0function JCalendar (year,month,date) {无忧脚本*}
zJ~F
        var _date = arguments.length == 0 ? new Date() : new Date(year,month-1,date);无忧脚本jh9F
d7`|jn0bY
        //实例变量
8mZ7[ D+z
u-gN&u\0        this.year = _date.getFullYear();无忧脚本
})u-WmH#` UW
        this.month = _date.getMonth() + 1;
Zi+j*L[!p6H0        this.fday = new Date(this.year,this.month-1,1).getDay();//每月第一天的前一天星期数无忧脚本"\,d'v'SJ0O:p
        this.dayNum = new Date(this.year,this.month,0).getDate();//每月的天数
u,@*\zuL-G0        //成员变量，当前年月日无忧脚本Bx\'m8l0ma
        JCalendar.cur_year = this.year;
)[jC"oJ(T+KJ0        JCalendar.cur_month = this.month;
o
}'rT3p;?0        JCalendar.cur_date = _date.getDate();
F+LK\4l}7?0}无忧脚本3svg3V7gM)A
JCalendar.prototype.show = function(){无忧脚本|
G
d7E5PK0BRm3s
        var date = new Array(this.fday > 0 ? this.day : 0);//预先定义一段空数组，对应日历里第一周空的位置无忧脚本6o`4Q)`/Br
        var html_str = new Array();无忧脚本 w|;w p,S1j~c!c
        var date_index = 0;无忧脚本^a7C4VG,y*m(J
        var weekDay = ["日","一","二","三","四","五","六"];无忧脚本L3EH@D-j
        for(var j = 1; j <= this.dayNum; j++){//初始化date数组无忧脚本g]y!sDd~3p
                date.push(j);
,t1mSj?:P6N0        }无忧脚本H8{W!d)_BJA[
B
        html_str.push("<table id='calendar'>");无忧脚本#s+lx6TC3_y
        html_str.push("<caption><span title='上一年份' ōnmouseover=\"this.style.color='#F90'\" ōnmouseout=\"this.style.color='#09F'\" ōnclick=\"JCalendar.update(-12);return false\" style='color:#09F;font-size:16px;margin-right:5px;'>«</span><span title='上一月份'  onmouseover=\"this.style.color='#F90'\" ōnmouseout=\"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\"  onmouseover=\"this.style.color='#F90'\" ōnmouseout=\"this.style.color='#09F'\" style='margin-left:15px;color:#09F;'>▼</span><span title='下一年份' ōnclick=\"JCalendar.update(12);return false\"  onmouseover=\"this.style.color='#F90'\" ōnmouseout=\"this.style.color='#09F'\" style='font-size:16px;margin-left:5px;color:#09F;'>»</span></caption>");无忧脚本(m,d)wX
K;k
        html_str.push("<thead><tr>");
c9IG\&A3Bl0        for(var i = 0; i < 7; i++){//填充日历头
%@)xpS~i}0                html_str.push("<td>" + weekDay[i] + "</td>");
#R`|5kj5]v5BJ)\0        }
mZ4ir6y0ls"qn0        html_str.push("</tr></thead>");无忧脚本a&xX-nMLJ^
        html_str.push("<tbody>");无忧脚本}z0z9Z8LY/U z
        for(var i = 0; i < 6; i++){//填充日期
m&Lwz
zcD)A,B_(vv0                html_str.push("<tr>");无忧脚本1Jz#I;PA;\O
                for(var j = 0; j < 7; j++){
3X-aDo'Kb
RLoR0                        tmp = date[date_index++];无忧脚本z9vQ1T\4I']3l3z
                        tmp = tmp ? tmp : "";
1oGGH	Y1]H0                        if(JCalendar.cur_date == tmp)无忧脚本8\/sUq)z!j+f
                                html_str.push("<td><span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span></td>");无忧脚本Z+^+{!YXX5@^r&DijY
                        else if(tmp == "")
s UP'`)x%C0                                html_str.push("<td></td>");
-cq"uye
k&P0                        else
u,j2?qG9P0                                html_str.push("<td><div ōnmouseover=\"this.style.backgroundColor='#CCC'\" ōnmouseout=\"this.style.backgroundColor=''\" ōnclick='JCalendar.click(this)'>" + tmp + "</div></td>");无忧脚本2y:~7eeYiZ
                }
m^f`(@)wn0                html_str.push("</tr>");
Sa9KQ"l/~"hO
u0        }无忧脚本aA!|lUwg5WvJ6x
        html_str.push("</tbody></table>");

s~2y/LlX1yy4N$q0        return html_str.join("");无忧脚本5^	Q/?
cLoD
}无忧脚本"jYt9|-_h(eiC
//静态方法无忧脚本UfLtoh
JCalendar.update = function(_month){无忧脚本9i;`'a:sc
        var date = new Date(JCalendar.cur_year,JCalendar.cur_month - 1 + _month,1);
~L%``;X(LKV0        var fday = date.getDay();//每月第一天的星期数无忧脚本4Zp-m4a5n
        var year = date.getFullYear();
K%g1P%~:mnJx*R;nl0        var month = date.getMonth() + 1;无忧脚本v5G){+`Dl
        var dayNum = new Date(JCalendar.cur_year,JCalendar.cur_month  + _month,0).getDate();//每月的天数
+j6o~8p%ge:tIG'y/d0        var tds = document.getElementById("calendar").getElementsByTagName("td");无忧脚本.Qb,w]{Q	T
        for(var i = 7; i < tds.length; i++)//清空日历内容无忧脚本'C:ZSnlGb
                tds[i].innerHTML = "";无忧脚本`'c^#L[3}Q
        document.getElementById("calendar_title").innerHTML = year + "年" + month + "月";//更新显示年月无忧脚本
euA{k{@8P
d n
        //更新当前年月无忧脚本$|T/]A([by
        JCalendar.cur_year = year;
Ko	W
n5QP?'r@d0        JCalendar.cur_month = month;
L6Z[(B"d0        for(var j = 1; j <= dayNum; j++){
%aa3lTK
B[#Cu0                if(j == JCalendar.cur_date)无忧脚本3j0|;|;M`DP+sq
                        tds[6 + fday + j].innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span>";无忧脚本,bf~y
t{
                else
&@)z#GhU]S0                        tds[6 + fday + j].innerHTML = "<div ōnmouseover=\"this.style.backgroundColor='#CCC'\" ōnmouseout=\"this.style.backgroundColor=''\" ōnclick='JCalendar.click(this)'>" + j + "</div>";无忧脚本Z+e3F8RK7\4d5KA
        }无忧脚本2f9[,EM@Z
        JCalendar.onupdate(year,month,JCalendar.cur_date);
#SKh#q
d+D0}
&aI%C'`,z]/Nx0
9IC2g6pj6}!J0JCalendar.onupdate = function(year,month,date){//日历更改时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期无忧脚本Gb&}2oS;kh0B
        alert(year + "年" + month + "月" + date + "日");
;cBL$y(He7x0}
R6K9Z;ElD3py0
zP(V"f Q3v4[0JCalendar.click = function(obj){无忧脚本;R
Wr{G8X*~ N/a5M
        var tmp = document.getElementById("c_today");无忧脚本2x.J+_(w6^&M!|
        tmp.parentNode.innerHTML = "<div ōnmouseover=\"this.style.backgroundColor='#CCC'\" ōnmouseout=\"this.style.backgroundColor=''\" ōnclick='JCalendar.click(this)'>" + tmp.innerHTML + "</div>";无忧脚本x(vS_ XS x
        JCalendar.cur_date = parseInt(obj.innerHTML);
m"Fvjc^0        obj.parentNode.innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + obj.innerHTML + "</span>";无忧脚本A@~"cA9{:J$o-g8L
        JCalendar.onclick(JCalendar.cur_year,JCalendar.cur_month,JCalendar.cur_date);
[*Iw$qH^0}
nMg7sz:bU0无忧脚本ZbgYqK@$AF
JCalendar.onclick = function(year,month,date){//点击日期时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期无忧脚本2yS*F4R#MaN
        alert(year + "年" + month + "月" + date + "日");
2[eR QiuKk)byNa0}</scrīpt>无忧脚本v5CH7{J
</head>
P2r/E*Xe
J"r
g0<body>无忧脚本@ b%a^7hR9x'L:Q3C
<div id="calendar_contain"></div>无忧脚本,C3A'Nh
dq
<scrīpt type="text/javascrīpt">无忧脚本9l(B,Wr3h8?
/***************说明***************
E"qa"?
Ta\0JCalendar.onclick (year,month,date)//点击日期时执行的静态函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期无忧脚本$i*kc#s+?ajG
JCalendar.onupdate (year,month,date){//日历更改时执行的函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期无忧脚本4ht#z;Qo
***********************************/
)Xq#k9?Cc?^'J0//一个例子无忧脚本Eeo7hpU
JCalendar.onclick = function (year,month,date){无忧脚本BGELQ'R
        alert("today is:" + year + "-" + month + "-" + date);无忧脚本5q{v:fPA
hjm\\
}无忧脚本AmC/g,I!O
  document.getElementById("calendar_contain").innerHTML = new JCalendar().show();无忧脚本
U'Lq\!Wj%]L
</scrīpt>无忧脚本]b#bJ;Xq;n
</body>
s rp&RmXn2r,{/m2j0</html>
[本帖最后由 brull 于 2007-4-18 23:15 编辑]
关于作者

轻量级漂亮日历控件 JCalendar，兼容IE&FireFox

全部脚印 不留脚印留下脚印:

相关阅读:

关于作者

轻量级漂亮日历控件 JCalendar，兼容IE&FireFox

全部脚印 不留脚印 留下脚印:

相关阅读:

全部脚印不留脚印留下脚印:
