源地址：https://jingyan.baidu.com/article/546ae185fa4f721149f28cbf.htm
文件：index.htm
<!DOCTYPE html>
<head>
<meta charset="utf8">
<title>日历例子</title>
<script src="calendar.js"></script>
</head>
<body>
<div id="main"><!-- 日历 --></div>
<script>
'use strict';
{
let rili = new Calendar({
container: 'main',
});
rili.show(11); // 12 月份
}
</script>
</body>
</html>
文件：calendar.js
'use strict';
class Calendar {
/**
* 构造函数
* @param {string} containerId 容器Id
* @param {number} year 年份
*/
constructor({ container, year = new Date().getFullYear() }) {
this.year = year;
this.container = document.getElementById(container);
}
/**
* 日历数据
* @param {number} month 月份
* @returns {array} 6行7列 日期 0~6 表示：星期天 ~ 星期六
*/
data(month) {
let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], arr = [];
let date = new Date(this.year, month), days = this.getDays(month);
for (let x = 0, day = 1; x < 6; x++) {
arr[x] = new Array(7).fill(null);
for (let y = x ? 0 : date.getDay(); y < 7 && day <= days; y++ , day++) {
arr[x][y] = day;
}
}
arr.unshift(week)
return arr;
}
/**
* 显示日历
* @param {number} month 月份
*/
show(month) {
let data = this.data(month);
let table = document.createElement('table'), tr, td, text;
table.border = 1;
for (let x = 0; x < data.length; x++) {
tr = document.createElement('tr');
table.appendChild(tr);
for (let y = 0; y < data[x].length; y++) {
td = document.createElement('td');
td.height = 24;
text = document.createTextNode(data[x][y] || " "); // 创建文本节点
td.appendChild(text);
tr.appendChild(td);
}
}
this.container.appendChild(table);
}
/**
* 当月天数
* @param {number} num 月份
* @returns {number} 天数
*/
getDays(num) {
const month = [31, this.isLeapYear() ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
return month[num];
}
/**
* 是否润年
* @returns {bool}
*/
isLeapYear() {
let year = this.year;
return ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) ? true : false;
}
}