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

CSS

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

网页调用

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

calendar.js

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;
	}
}