源地址：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; } }
