JavaScript blog式日历控件新算法_JavaScript

JavaScript blog式日历控件新算法

使用说明：

程序比较简单，代码中都有说明，这里说说怎么使用。
首先是实例化一个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（显示下一个月）。

测试代码：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>blog式日历控件_www.jb51.net_移动技术网</title> 
</head> 
<body> 
 
<style type="text/css">

.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; 
} 
</style> 
<div class="calendar"> 
<div id="idcalendarpre"><<</div> 
<div id="idcalendarnext">>></div> 
<span id="idcalendaryear">2008</span>年 <span id="idcalendarmonth">8</span>月 
<table cellspacing="0"> 
<thead> 
<tr> 
<td>日</td> 
<td>一</td> 
<td>二</td> 
<td>三</td> 
<td>四</td> 
<td>五</td> 
<td>六</td> 
</tr> 
</thead> 
<tbody id="idcalendar"> 
</tbody> 
</table> 
</div> 
 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]