二、js简易日历控件

效果展示：

代码展示：

HTML代码

var date = new Date(); var mapping = []; mapping.push(new DateLinkMapping("3-22-2010", "javascript:alert(1)")); mapping.push(new DateLinkMapping("4-1-2010", "javascript:alert(1)")) Calendar.Init(null, mapping);

Calendar.RenderCalendar("calendar", date.getMonth() + 1, date.getFullYear());

css代码：

* { margin:0; padding:0;}body { font-size: 12px;}.prevMonth, .nextMonth { color: Gray;}.calendar td { width:25px; height:25px; text-align: center;}.calendar th { background-color: #b8eaff; padding:2px 5px; font-weight: normal;}.calendar td a:visited { color: blue;}.curDay { background:#ccc; font-weight:bold; color:#000;}

js代码：

function DateLinkMapping(date, link) { this.Date = date; this.Link = link;}var Calendar = { settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth", curMonthNormalCellClass: "", prevNextMonthDaysVisible: true }, containerId: "", weekDayNames: [], dateLinkMappings: [], Init: function(weekDayNames, dateLinkMappings, settings) { if (!weekDayNames || weekDayNames.length && weekDayNames.length != 7) { this.weekDayNames[1] = "一"; this.weekDayNames[2] = "二"; this.weekDayNames[3] = "三"; this.weekDayNames[4] = "四"; this.weekDayNames[5] = "五"; this.weekDayNames[6] = "六"; this.weekDayNames[7] = "日"; } else { this.weekDayNames = weekDayNames; } if (dateLinkMappings) { this.dateLinkMappings = dateLinkMappings; } }, RenderCalendar: function(divId, month, year) { this.containerId = divId; var ht = [];

ht.push(" "); ht.push(this._RenderTitle(month, year)); ht.push(this._RenderBody(month, year)); ht.push("");

document.getElementById(divId).innerHTML = ht.join(""); this._InitEvent(divId, month, year); }, _RenderTitle: function(month, year) { var ht = []; //日期 ht.push(""); ht.push(""); ht.push(""); //星期 ht.push(""); for (var i = 0; i < 7; i++) { var day = (i + this.settings.firstDayOfWeek) == 7 ? 7 : (i + this.settings.firstDayOfWeek) % 7; ht.push("", this.weekDayNames[day], "") } ht.push(""); return ht.join(""); }, _RenderBody: function(month, year) { var date = new Date(year, month - 1, 1); var day = date.getDay(); var dayOfMonth = 1; var daysOfPrevMonth = (7 - this.settings.firstDayOfWeek + day) % 7; var totalDays = this._GetTotalDays(month, year); var totalDaysOfPrevMonth = this._GetToalDaysOfPrevMonth(month, year); var ht = []; var curDate;

for (var i = 0; ; i++) { curDate = null; if (i % 7 == 0) {//新起一行 ht.push(""); } ht.push(" if (i >= daysOfPrevMonth && dayOfMonth curDate = new Date(year, month - 1, dayOfMonth); if (Date.parse(new Date().toDateString()) - curDate == 0) { ht.push(" class='", this.settings.curDayClass, "'"); } else { ht.push(" class='", this.settings.curMonthNormalCellClass, "'"); } dayOfMonth++;

} else if (i < daysOfPrevMonth) {//上月 if (this.settings.prevNextMonthDaysVisible) { var prevMonth = month; var prevYear = year; if (month == 1) { prevMonth = 12; prevYear = prevYear - 1; } else { prevMonth = prevMonth - 1; } curDate = new Date(prevYear, prevMonth - 1, totalDaysOfPrevMonth - (daysOfPrevMonth - i - 1));

ht.push(" class='", this.settings.prevMonthCellClass, "'"); } } else {//下月 if (this.settings.prevNextMonthDaysVisible) { var nextMonth = month; var nextYear = year; if (month == 12) { nextMonth = 1; nextYear = prevYear + 1; } else { nextMonth = nextMonth + 1; } curDate = new Date(nextYear, nextMonth - 1, i - dayOfMonth - daysOfPrevMonth + 2); ht.push(" class='", this.settings.nextMonthCellClass, "'"); } } ht.push(">"); ht.push(this._BuildCell(curDate)); ht.push(""); if (i % 7 == 6) {//结束一行 ht.push(""); } if (i % 7 == 6 && dayOfMonth - 1 >= totalDays) { break; } } return ht.join(""); }, _BuildCell: function(curDate) { var ht = []; if (curDate) { for (var j = 0; j < this.dateLinkMappings.length; j++) { if (Date.parse(this.dateLinkMappings[j].Date) - curDate == 0) { ht.push("", curDate.getDate(), ""); break; } } if (j == this.dateLinkMappings.length) { ht.push(curDate.getDate()); } } else { ht.push("&nbsp;"); } return ht.join(""); }, _InitEvent: function(divId, month, year) { var t = this; document.getElementById(this.containerId + "_prevMonth").style.cursor = "pointer"; document.getElementById(this.containerId + "_nextMonth").style.cursor = "pointer";

document.getElementById(this.containerId + "_prevMonth").onclick = function() { if (month == 1) { month = 12; year = year - 1; } else { month = month - 1; }

t.RenderCalendar(divId, month, year); }; document.getElementById(this.containerId + "_nextMonth").onclick = function() { if (month == 12) { month = 1; year = year + 1; } else { month = month + 1; }

t.RenderCalendar(divId, month, year); }; }, //计算指定月的总天数 _GetTotalDays: function(month, year) { if (month == 2) { if (this._IsLeapYear(year)) { return 29; } else { return 28; } } else if (month == 4 || month == 6 || month == 9 || month == 11) { return 30; } else { return 31; } }, _GetToalDaysOfPrevMonth: function(month, year) { if (month == 1) { month = 12; year = year - 1; } else { month = month - 1; } return this._GetTotalDays(month, year); }, //判断是否是闰年 _IsLeapYear: function(year) { return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0); }};