使用说明:
程序比较简单,代码中都有说明,这里说说怎么使用。
首先是实例化一个Calendar,并设置参数。
参数说明:
Year:要显示的年份
Month:要显示的月份
SelectDay:选择日期
onSelectDay:在选择日期触发
onToday:在当天日期触发
onFinish:日历画完后触发
一般SelectDay设置成选择了的日期,并在onSelectDay中设置一个函数用来设置这个日期的样式,
例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect:
复制代码 代码如下:
SelectDay: new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect"; },
而onToday就用来设置今日日期的样式,
例如实例里面把今天的日期的样式设为onToday:
onToday: function(o){ o.className = "onToday"; },
在onFinish中可以放需要设置日历的程序。
可以通过this.Year和this.Month获取当前日历显示的年份和月份。
对有数据的日期的也在这里设置,例如实例中是有一个当前月份的有数据的日期列表,然后根据这个列表对相应的日期进行设置:
复制代码 代码如下:
var flag = [10,15,20];
for(var i = 0, len = flag.length; i < len; i++){
this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
}
实例中是固定了这个日期列表,实际应用中可以根据年份月份获取对应的日期列表,
个人推荐用年份月份通过ajax获取。
程序中还有两个有用的方法PreMonth(显示上一个月)和NextMonth(显示下一个月)。
测试代码:
.Calendar {
font-family:Verdana;
font-size:12px;
background-color:#e0ecf9;
text-align:center;
width:200px;
height:160px;
padding:10px;
line-height:1.5em;
}
.Calendar a{
color:#1e5494;
}
.Calendar table{
width:100%;
border:0;
}
.Calendar table thead{color:#acacac;}
.Calendar table td {
font-size: 11px;
padding:1px;
}
#idCalendarPre{
cursor:pointer;
float:left;
padding-right:5px;
}
#idCalendarNext{
cursor:pointer;
float:right;
padding-right:5px;
}
#idCalendar td.onToday {
font-weight:bold;
color:#C60;
}
#idCalendar td.onSelect {
font-weight:bold;
}
<<
>>
2008年 8月
日 | 一 | 二 | 三 | 四 | 五 | 六 |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
您可能感兴趣的文章:
- Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
- javascript和HTML5利用canvas构建猜牌游戏实现算法
- js+ajax实现的A*游戏路径算法整理
- 很好用的js日历算法详细代码
- 原生js的RSA和AES加密解密算法
- Javascript中的常见排序算法
- javascript中解析四则运算表达式的算法和示例
- js版本A*寻路算法
- JS随机洗牌算法之数组随机排序
- JS/HTML5游戏常用算法之追踪算法实例详解