简易日历插件（纯练习玩玩）

table{ width: 400px; }
table,td{ border:1px solid white; text-align: center; }

var target = document.getElementById('target');  //日历添加到网页某个元素里
calendar = new Calendar(target);

function Calendar(targetId){
this.targetId = targetId;
this.createDOM();
this.calendarBody = document.getElementById("calendarBody"); //日历主体部分
this.calendarTd = this.calendarBody.getElementsByTagName('td'); //日历主体部分
this.currentDate = document.getElementById('currentDate'); //当前月，用于显示当前是哪年哪月
this.preMonth = document.getElementById('preMonth');  //上一个月链接
this.nextMonth = document.getElementById('nextMonth');  //下一月链接

this.eachMothDays = [31,28,31,30,31,30,31,31,30,31,30,31]; //设置每个月月份的数组
this.initCalendar();
var that = this;
this.preMonth.onclick = function(){
that.getPreMonth();
};
this.nextMonth.onclick = function(){
that.getNextMonth();
};
}
Calendar.prototype = {
constructor:Calendar,
createDOM:function(){
var DOMStr = "<table cellpadding='0' cellspacing='0' id='calendar'>"+
"<thead>"+
"<tr><td colspan='2' id='preMonth'>上一月</td><td colspan='3' id='currentDate'></td>"+
"<td colspan='2' id='nextMonth'>下一月</td></tr>"+
"<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>"+
"</thead>"+
"<tbody id='calendarBody'>"+
"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
"</tbody>"+
"</table>";
this.targetId.innerHTML = DOMStr;
},
initCalendar:function(){  //初始化日历，默认情况下显示当前月份的
var date = new Date(); //初始化的情况下，选取当前月份
if(date.getFullYear() % 4 == 0 && date.getFullYear() % 100 != 0 ){
this.eachMothDays[1] = 29;
}
this.preMonth.month = date.getMonth();  //给上一个月绑定一个月份数字
this.nextMonth.month = parseInt(date.getMonth()) + 2; //给下一个月绑定一个月份数字
this.currentDate.year = date.getFullYear();
this.currentDate.innerHTML = date.getFullYear() +"年"+ (date.getMonth()+1) + "月";

var firstDay = this.getFirstDay(date.getFullYear(),date.getMonth());  //获取每个月一号第一天是星期几
this.fillDate(firstDay,date.getMonth()); //填充日期
},
getFirstDay:function(year,month){  //获取每个月第一天是星期几
//console.log(year,month);
var eachMonthFirstDay = new Date(year,month,1);
//console.log(eachMonthFirstDay.getDay());
return eachMonthFirstDay.getDay();
},
fillDate:function(firstDay,month){  //根据获得的每个月第一天是星期几进行循环填充数据
//console.log(firstDay,month);
for(var j=0;j<42;j++){  //再次填充月份之前把当前数据全部清空
this.calendarTd[j].innerHTML = "";
}
for(var i = 1;i<=this.eachMothDays[month];i++,firstDay++){
this.calendarTd[firstDay].innerHTML = i;
}
},
getPreMonth:function(){
//console.log(this.currentDate.year+","+this.preMonth.month);
if(this.preMonth.month < 1){
this.currentDate.year = this.currentDate.year -1;
this.preMonth.month =  12;
}
var firstDay = this.getFirstDay(this.currentDate.year,this.preMonth.month-1);
this.fillDate(firstDay,parseInt(this.preMonth.month)-1);

this.currentDate.innerHTML = this.currentDate.year+"年"+this.preMonth.month+"月";
this.preMonth.month = this.preMonth.month - 1;
this.nextMonth.month = this.nextMonth.month+1;
//console.log(this.preMonth.month+","+this.nextMonth.month);
},
getNextMonth:function(){
console.log(this.currentDate.year+","+this.nextMonth.month);
if(this.nextMonth.month > 12){
this.currentDate.year = this.currentDate.year + 1;
this.nextMonth.month =  1;
}
var firstDay = this.getFirstDay(this.currentDate.year,this.nextMonth.month-1);
this.fillDate(firstDay,parseInt(this.nextMonth.month)-1);
this.currentDate.innerHTML = this.currentDate.year+"年"+this.nextMonth.month+"月";
this.preMonth.month = this.preMonth.month -1;
this.nextMonth.month = this.nextMonth.month+1;
}
}