### JS学习之一个简易的日历控件
#### 概述
本文主要介绍如何利用JavaScript创建一个简单的日历控件，并详细解析其实现思路和技术要点。该控件具有一定的灵活性和可配置性，能够满足基本的日历展示需求。
#### 可配置项详解
在构建这个简易日历控件之前，我们需要定义一些基础的配置项，以便于根据具体需求调整控件的样式和行为。
```javascript
settings: {
firstDayOfWeek: 1, // 设置每周的第一天，默认为星期一
baseClass: "calendar", // 控件的基本CSS类名
curDayClass: "curDay", // 当前日期的CSS类名
prevMonthCellClass: "prevMonth", // 上个月日期的CSS类名
nextMonthCellClass: "nextMonth", // 下个月日期的CSS类名
curMonthNormalCellClass: "", // 本月普通日期的CSS类名
prevNextMonthDaysVisible: true, // 是否显示非当月日期
weekDayNames: [], // 星期名称数组
},
```
- **`firstDayOfWeek`**: 定义一周中的第一天，默认值为1，表示星期一。
- **`prevNextMonthDaysVisible`**: 布尔值，控制是否显示上个月和下个月的部分日期。
- **`weekDayNames`**: 包含星期名称的数组，例如：`["周日", "周一", "周二", "周三", "周四", "周五", "周六"]`。注意索引从1开始，即索引1对应星期一，以此类推。
#### HTML代码生成
在了解了这些配置选项后，我们来看看如何生成实际的日历HTML结构。
##### 1. 生成日历头部
```javascript
_RenderTitle: function (month, year) {
var ht = [];
// 日期
ht.push("<tr>");
ht.push("<th colspan='7' style='width:100%;'><div style='float:left;width:10%;text-align:center;' id='", this.containerId, "_prevMonth' title='上一月'><</div><div style='float:left;text-align:center;width:80%'>", year, "年", month, "月</div><div style='float:right;width:10%;text-align:center;' id='", this.containerId, "_nextMonth' 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("");
},
```
此方法负责生成日历的标题部分，包括月份和年份以及星期的名称。这里的关键在于计算出当前单元格所对应的星期。通过`(i + this.settings.firstDayOfWeek) % 7`即可轻松获得当前单元格对应的星期。
##### 2. 生成日历主体
接下来是生成日历的主要部分，包括上个月、本月和下个月的日期。
```javascript
_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("class='", this.curDayClass, "'");
} else {
ht.push("class='", this.curMonthNormalCellClass, "'");
}
ht.push(">", dayOfMonth++, "</td>");
} else if (i < daysOfPrevMonth) { // 上个月
ht.push("class='", this.prevMonthCellClass, "'", ">", totalDaysOfPrevMonth--, "</td>");
} else { // 下个月
ht.push("class='", this.nextMonthCellClass, "'", ">", dayOfMonth++, "</td>");
}
if (i % 7 === 6) {
ht.push("</tr>");
if (dayOfMonth > totalDays) {
break;
}
}
}
return ht.join("");
},
```
此段代码负责生成日历主体部分，即具体的日期显示。通过循环遍历每一个单元格，并根据其位置判断属于哪个月份，进而确定相应的样式和内容。
- 首先计算出当前月份的总天数和上个月的总天数。
- 然后通过循环遍历每一行和每一列，根据`i`的值来判断当前单元格属于哪个月份。
- 对于上个月和下个月的日期，需要额外处理以确保正确显示。
#### 结论
本文介绍了如何利用JavaScript创建一个简易的日历控件。通过对可配置项的定义和HTML代码的生成，实现了对日期的基本展示。该控件不仅能够自定义样式，还支持跨月日期的显示。读者可以根据自己的实际需求进一步扩展和优化该控件的功能。
