es6类自定义日历

 html代码部分

 js部分

var cander_id = document.getElementById("cander_id");
let cander = new Cander();//实例化新的Cander对象
cander.create_table(cander_id);//创建日历的头部，星期天
cander.getDate();//创建这个日历的身体部分

绘制日历表格的类对象

class Cander {
    constructor() {
        this.monthDay = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        this.thead = [
            {"id": "1", "name": "一"},
            {"id": "2", "name": "二"},
            {"id": "3", "name": "三"},
            {"id": "4", "name": "四"},
            {"id": "5", "name": "五"},
            {"id": "6", "name": "六"},
            {"id": "7", "name": "七"},
        ];//定义表格头部数据
    }

    /**
     * 获取课程日历
     * 创建日历
     */
    getDate() {
        let monthData = JSON.parse(localStorage.getItem("dates"));//课程数据
        for (let i in monthData) {
            for (let j in monthData[i]) {
                let year = i;
                let month = j;
                this.create_tbody(year, month, this.whatDay(year, month), monthData[i][j]);//创建日历的身体部分
            }
        }
    }
    /**
 * 判断某年是否是闰年
 * @param year年
 *
 */
isLeap(year) {
    if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        return true;
    }
    else {
        return false;
    }
}

/**
 * 创建表格的头部
 * @param obj  追加dom的对象节点
 *
 */
create_table(obj) {
    for (let i in this.thead) {
        var li = " " + this.thead[i].name + "";
        obj.insertAdjacentHTML('beforeend', li);
    }
}

/**
 * 创建渲染表格的身体部分存放数据
 * @param year 年份
 * @param month 月份
 * @param firstDay 第一天
 * @param cDate 课程数据
 */
create_tbody(year, month, firstDay, cDate) {
    var arr = [];
    for (let u in cDate) {
        arr.push(cDate[u].day);
    }
    let i;
    let tagClass = "";
    let nowDate = new Date();
    let days;//从数组里取出该月的天数
    if (month == 2) {
        if (isLeap(year)) {
            days = 29;
        }
        else {
            days = 28;
        }
    }
    else {
        days = this.monthDay[month - 1];
    }
    /*当前显示月份添加至顶部*/
    let topdateHtml = year + "年" + month + "月";
    /*添加日期部分*/
    var tbodyHtml = '    \n' +
        '                \n' +
        '                    
\n' +
        '                        
' + topdateHtml + '
\n' +
        '                        
\n' +
        '                            
\n' +
        '                        
\n' +
        '                    
\n' +
        '\n' +
        '                \n' +
        '            ';

    for (i = 0; i < firstDay; i++) {//对1号前空白格的填充
        tbodyHtml += "";
    }
    let changLine = firstDay;
    for (i = 1; i <= days; i++) {//每一个日期的填充
        if (year == nowDate.getFullYear() && month == nowDate.getMonth() + 1 && i == nowDate.getDate()) {
            tagClass = "curDate";//当前日期对应格子
        }
        else {
            tagClass = "isDate";//普通日期对应格子，设置class便于与空白格子区分开来
        }
        if (arr.indexOf(i) >= 0) {
            var arrVal = arr[arr.indexOf(i)];
            if (arrVal === i) {
                let status = cDate[arr.indexOf(i)].status;
                let type_class = CON.cStatus[status];
                tbodyHtml += "
" + i + "
";
            }
        }
        else {
            tbodyHtml += "
 " + i + "  
";
        }
        changLine = (changLine + 1) % 7;
        if (changLine == 0 && i != days) {//是否换行填充的判断
            tbodyHtml += "";
        }
    }
    if (changLine != 0) {//添加结束，对该行剩余位置的空白填充
        for (i = changLine; i < 7; i++) {
            tbodyHtml += "";
        }
    }
    tbodyHtml += "";
    let tbody = document.getElementById('tbody');
    tbody.insertAdjacentHTML('beforeend', tbodyHtml);
}

/**
 * 下一个月的数据
 */
nextMonth() {
    var topStr = document.getElementById("topDate").innerHTML;
    var pattern = /\d+/g;
    var listTemp = topStr.match(pattern);
    var year = Number(listTemp[0]);
    var month = Number(listTemp[1]);
    var nextMonth = month + 1;
    if (nextMonth > 12) {
        nextMonth = 1;
        year++;
    }
    this.create_tbody(year, nextMonth, this.whatDay(year, nextMonth));
}

/**
 * 这是上一个月的数据
 */
preMonth() {
    var topStr = document.getElementById("topDate").innerHTML;
    var pattern = /\d+/g;
    var listTemp = topStr.match(pattern);
    var year = Number(listTemp[0]);
    var month = Number(listTemp[1]);
    var preMonth = month - 1;
    if (preMonth < 1) {
        preMonth = 12;
        year--;
    }

    this.create_tbody(year, preMonth, whatDay(year, preMonth));
}
    

 /**
 * 判断某年某月某日是星期几，默认日为0
 * @param year
 * @param month
 * @param day
 * @returns {number}
 */
whatDay(year, month, day = 0) {
    var sum = 0;
    sum += (year - 1) * 365 + Math.floor((year - 1) / 4) - Math.floor((year - 1) / 100) + Math.floor((year - 1) / 400) + day;
    for (var i = 0; i < month - 1; i++) {
        sum += this.monthDay[i];
    }
    if (month > 2) {
        if (this.isLeap(year)) {
            sum += 29;
        }
        else {
            sum += 28;
        }
    }
    return sum % 7;      //余数为0代表那天是周日，为1代表是周一，以此类推
}


}