源地址：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; ???}}js 简单日历
原文地址：https://www.cnblogs.com/whnba/p/10158699.html