JS学习之一个简易的日历控件(2)

     if (i % 7 == 6 && dayOfMonth - 1 >= totalDays) {
break;
}

     i % 7 == 6表示一行结束, dayOfMonth - 1 >= totalDays表示本月日期已经展示完毕。
    (8).构造curDate:
curDate代表每个单元格对应的日期。
在显示本月日期时, curDate = new Date(year, month - 1, dayOfMonth);
在显示上月日期时, curDate = new Date(prevYear, prevMonth-1, totalDaysOfPrevMonth - (daysOfPrevMonth - i - 1));
在显示下月日期时, curDate = new Date(nextYear, nextMonth-1, i - dayOfMonth - daysOfPrevMonth + 2),加2是由于i是从0开始，本身就少了1，dayOfMonth 在退出显示本月日期时多加了一次.
    最后，再来看看_BuildCell做了什么事情:

复制代码 代码如下:

_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("<a href='", this.dateLinkMappings[j].Link, "'>", curDate.getDate(), "</a>");
break;
}
}
if (j == this.dateLinkMappings.length) {
ht.push(curDate.getDate());
}
}
else {
ht.push("&nbsp;");
}
return ht.join("");
},

    事实上本日历控件的意图是用户可以在初始化时传入日期和该日期对应的链接的映射的数组，也就是this.dateLinkMappings，当构建单元格时若正在构建的日期包含在this.dateLinkMappings里，则将当前单元格构造成<a>形式，否则为普通的文本形式。

    OK，实现逻辑大致如此，篇末看下演示效果：
前台调用代码如下:

复制代码 代码如下:

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("myCalendar", date.getMonth() + 1, date.getFullYear());

打包下载地址

您可能感兴趣的文章: