使用说明：
程序比较简单，代码中都有说明，这里说说怎么使用。
首先是实例化一个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>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getelementbyid(id) : id;
};
var class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var calendar = class.create();
calendar.prototype = {
initialize: function(container, options) {
this.container = $(container);//容器(table结构)
this.days = [];//日期对象列表
this.setoptions(options);
this.year = this.options.year;
this.month = this.options.month;
this.selectday = this.options.selectday ? new date(this.options.selectday) : null;
this.onselectday = this.options.onselectday;
this.ontoday = this.options.ontoday;
this.onfinish = this.options.onfinish;
this.draw();
},
//设置默认属性
setoptions: function(options) {
this.options = {//默认值
year: new date().getfullyear(),//显示年
month: new date().getmonth() + 1,//显示月
selectday: null,//选择日期
onselectday: function(){},//在选择日期触发
ontoday: function(){},//在当天日期触发
onfinish: function(){}//日历画完后触发
};
object.extend(this.options, options || {});
},
//上一个月
premonth: function() {
//先取得上一个月的日期对象
var d = new date(this.year, this.month - 2, 1);
//再设置属性
this.year = d.getfullyear();
this.month = d.getmonth() + 1;
//重新画日历
this.draw();
},
//下一个月
nextmonth: function() {
var d = new date(this.year, this.month, 1);
this.year = d.getfullyear();
this.month = d.getmonth() + 1;
this.draw();
},
//画日历
draw: function() {
//用来保存日期列表
var arr = [];
//用当月第一天在一周中的日期值作为当月离第一天的天数
for(var i = 1, firstday = new date(this.year, this.month - 1, 1).getday(); i <= firstday; i++){ arr.push(" "); }
//用当月最后一天在一个月中的日期值作为当月的天数
for(var i = 1, monthday = new date(this.year, this.month, 0).getdate(); i <= monthday; i++){ arr.push(i); }
var frag = document.createdocumentfragment();
this.days = [];
while(arr.length > 0){
//每个星期插入一个tr
var row = document.createelement("tr");
//每个星期有7天
for(var i = 1; i <= 7; i++){
var cell = document.createelement("td");
cell.innerhtml = " ";
if(arr.length > 0){
var d = arr.shift();
cell.innerhtml = d;
if(d > 0){
this.days[d] = cell;
//判断是否今日
if(this.issame(new date(this.year, this.month - 1, d), new date())){ this.ontoday(cell); }
//判断是否选择日期
if(this.selectday && this.issame(new date(this.year, this.month - 1, d), this.selectday)){ this.onselectday(cell); }
}
}
row.appendchild(cell);
}
frag.appendchild(row);
}
//先清空内容再插入(ie的table不能用innerhtml)
while(this.container.haschildnodes()){ this.container.removechild(this.container.firstchild); }
this.container.appendchild(frag);
this.onfinish();
},
//判断是否同一日
issame: function(d1, d2) {
return (d1.getfullyear() == d2.getfullyear() && d1.getmonth() == d2.getmonth() && d1.getdate() == d2.getdate());
}
};
</script>
<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>
<script language="javascript">
var cale = new calendar("idcalendar", {
selectday: new date().setdate(10),
onselectday: function(o){ o.classname = "onselect"; },
ontoday: function(o){ o.classname = "ontoday"; },
onfinish: function(){
$("idcalendaryear").innerhtml = this.year; $("idcalendarmonth").innerhtml = 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>";
}
}
});
$("idcalendarpre").onclick = function(){ cale.premonth(); }
$("idcalendarnext").onclick = function(){ cale.nextmonth(); }
</script>
</body>
</html>
更多javascript blog式日历控件新算法。