这个日历控件类似于园子用的日历，如下图：
这种日历控件实现起来不难，下面简单分析下我的思路：
首先，是该控件的可配置项：
复制代码 代码如下:
...
settings:
{
firstDayOfWeek: 1,
baseClass: "calendar",
curDayClass: "curDay",
prevMonthCellClass: "prevMonth",
nextMonthCellClass: "nextMonth",
curMonthNormalCellClass: "",
prevNextMonthDaysVisible: true
},
...
weekDayNames: [],
...
其中有一半是用来控制单元格样式的(不做过多描述)，另外几个（firstDayOfWeek,prevNextMonthDaysVisible,weekDayNames）,意义如下:
firstDayOfWeek:日历以星期几做为第一天
prevNextMonthDaysVisible:是否显示本月之外的日期
weekDayNames:星期的名称（一个索引从1开始的数组,1处的值将作为周一的显示名称，以此类推）
接下来，进入生成html代码阶段:
1.生成日历头:
复制代码 代码如下:
_RenderTitle: function(month, year) {
var ht = [];
//日期
ht.push("<tr>");
ht.push("<th colspan='7'><div title='上一月'><</div><div>", year, "年", month, "月</div><div title='下一月'>></div></th>");
ht.push("</tr>");
//星期
ht.push("<tr>");
for (var i = 0; i < 7; i++) {
var day = (i + this.settings.firstDayOfWeek) == 7 ? 7 : (i + this.settings.firstDayOfWeek) % 7;
ht.push("<th>", this.weekDayNames[day], "</th>")
}
ht.push("</tr>");
return ht.join("");
},
日期部分为操作‘按钮'的id使用日历控件容器的id 作为前缀，以保证id唯一。
星期部分根据firstDayOfWeek的设置来获取weekDayName。这里关键在于判断每个单元格代表星期几，思路很简单：
var day = (i + this.settings.firstDayOfWeek) == 7 ? 7 : (i + this.settings.firstDayOfWeek) % 7;
这样就可以取得当前单元格代表的星期了。
2.生成日历的主要部分：
复制代码 代码如下:
_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("<tr>");
}
ht.push("<td");
if (i >= daysOfPrevMonth && dayOfMonth <= totalDays) {//本月
curDate = new Date(year, month - 1, dayOfMonth);
if (Date.parse(new Date().toDateString()) - curDate == 0) {
ht.push("");
}
else {
ht.push("");
}
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("");
}
}
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("");
}
}
ht.push(">");
ht.push(this._BuildCell(curDate));
ht.push("</td>");
if (i % 7 == 6) {//结束一行
ht.push("</tr>");
}
if (i % 7 == 6 && dayOfMonth - 1 >= totalDays) {
break;
}
}
return ht.join("");
},
(1).获取该月一号代表星期几。这样才能判断1号应该放到哪个单元格，也就是该月从哪个单元格开始(创建日期的时候month减了1，这是由于js Date对象本身的特性)。
(2).定义了一个标识变量 dayOfMonth ,用于控制本月日期显示区域。
(3).计算要展示的上月的天数以及上月的总天数(不用计算下月要展示的天数和总天数，因为下月要展示的日期是从1开始，最多不会超过6)。
(4).显示本月的日期:
条件i >= daysOfPrevMonth && dayOfMonth <= totalDays决定了本月日期的显示区域。
(5).显示上月日期:
当i < daysOfPrevMonth 时即为上月日期的显示区域。
(6). (4)、(5)之外当然就是下月日期的显示区域了。
(7).何时结束:
从代码看到for循环是没有终止条件的，因此必须自己决定何时退出循环：
复制代码 代码如下: