这里主要有两点需要思考一下，一是日历是否固定行数，如果不固定那么行数怎么确定，剩下的表格怎么安排，如果固定那么，当月占几行，剩下的行数怎么安排，二是每月的几号
我这里是选择了日历不固定，其实想了下发现固定行数比不固定要简单，不过这时已经写完了，详细说明看注释，，这里引用了jquery，不用的同学把相关jquery代码替换成js代码就好了
<body>
<div id="subadd"><span style="cursor: pointer;">减</span><span style="cursor: pointer;">加</span></div>
<table cellpadding='0'><h4 style="margin: 0px;"><span id="year"></span><span id="mouth"></span><span id="days"></span></h4>
<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
<tbody id="tbody"></tbody>
</table>
<script type="text/javascript">
var times = function (e){
var today = new Date();
//判断是否有切换月份
if(e != undefined)
{ m= e-1;
$("#mouth").html(e);
}
else
{
m = today.getMonth();
$("#mouth").html(m+1);//获取的月份比实际月份少一;
}
//闰月判断
function isryue(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}
var i=0,k=0,
y = today.getFullYear(),//获取年份
d = today.getDate(),//获取当前日
fd = new Date(y,m,1),//当月的第一天
dated= 0,
lastd=0,
tablelie='',
tablelies='',
rows ='',
fw = fd.getDay();//第一天对应的星期
yarray = new Array(31,28+isryue(y),31,30,31,30,31,31,30,31,30,31)//创建月份数组
$("#year").html(y);//添加年份字段
$("#days").html(d);//添加月份字体
row = Math.ceil((fw+yarray[m])/7);//确定表格的行数
//循环出表格及日期
for(i=0;i<row;i++){
tablelies='';
for(k=0;k<7;k++){
var tablerow ="<tr>";
var riq = 7*i+k;//表格索引
var dates = riq-fw+1;//确定日期及对应的星期，也就是每个日期在表格中的位置
var ask = 1;//便于下面判断;
//处理当月1号以前的日期
if(dates<=0){
ask = 0;
if(m==0){//判断是否是1月份
dated = dates = yarray[11]+dates;//如果为一月则显示12月份的日期从最后一天开始倒数
}else{
dated = dates = yarray[m-1]+dates;//显示上一个月的日期从最后一天开始算起,倒数
}
}
//处理当月最后一天以后的日期,即下月的
else if(dates>yarray[m]){
ask = 2;
if(m==11){
lastd = dates = dates-yarray[0];//如果为12月则显示1月份的日期，从1号开始
}else{
lastd = dates = dates-yarray[m];//显示下月的日期,
}
}
//高亮当月当天,上月及下月日期加灰不可点击
dates==d?tablelie="<td style='color: red;'>"+dates+"</td>":(dates==lastd?tablelie="<td style='color: #666;cursor: not-allowed;'>"+dates+"</td>":(ask==2?tablelie="<td style='color:#666;cursor: not-allowed;'>"+dates+"</td>":tablelie="<td>"+dates+"</td>"));
tablelies =tablelies+ tablelie;//获取一行的内容
var tablerowend ="</tr>";
}
rows =rows+tablerow+tablelies+tablerowend;//获取所以内容
}
$("#tbody").html(rows);//添加到表格正文
}
$(document).ready(function(){
times();//调用函数 这里为什么要放到ready中呢，一开始我是想用一个立即执行函数来显示日历的但是发现一个问题就是，立即执行函数没法调用，而能调用又不能立即执行所以想到了jq的这ready
//这里是月份的切换
$("#subadd span").on('click',function(){
var index = $(this).index(),
am = $("#mouth").html();
if(index==1){
if(am>11){
am=1;
}else{
am++;
}
times(am);
}else if(index==0){
if(am<=1){
am=12;
}else{
am--;
}
times(am);
}
})
})
</script>
</body>