js实现日历

1需求 

默认展示当前月份，点击箭头切换上月下月，并展示每天的上课时间。（日历由时间戳计算，后端不返回555~）

2 实现思路 

• 基准时间：计算当月1号的时间戳作为基准时间。
• 边界值：计算下月1号的时间戳减去一天的时间戳，计算当月天数。每天的时间戳=基准时间戳+日期*一天的时间戳。
• 补空位：由1号是星期几计算1号的位置，并在数组前面补空位；同理由最后一天是星期几计算空位数，并在数组后面补空位。
• 切换：月份加一或减一计算基准时间，重新计算每天的时间戳。（注意月份左右两个边界值）

3实现代码 

 html

<el-dialog :visible.sync="editVisible" width="800px" title="上课时间" custom-class="container">
    <div class="wrap">
        <div class="topTime">
            <span @click="changeMonth(-1)">&lt;</span>
            <span class="date">{{ lineOne }}</span>
            <span @click="changeMonth(1)">&gt;</span>
        </div>
        <ul class="timeList">
            <li class="timeItem" v-for="(item, index) in dateArr" :key="index">
                <div class="timeNum">
                    <p v-for="(item2, index2) in item && item.timeArr" :key="index2">{{ item2 && item2 }}</p>
                </div>
                <div class="dateNum" :style="{ background: item ? item.week : '#fff' }">{{ item ? item.date : '' }}</div>
            </li>
        </ul>
    </div>
</el-dialog>

css

.container {
    .wrap {
        width: 100%;
    }
    .topTime {
        background: #f9f9f9;
        width: 100%;
        height: 40px;
        // padding: 0 15px;
        box-sizing: border-box;
        line-height: 40px;
        font-size: 20px;
        border-radius: 5px;
        text-align: center;
        .date {
            margin: 0 30px;
        }
        span {
            cursor: pointer;
        }
    }
    .timeList {
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
        .timeItem {
            border: 1px solid #dadada;
            text-align: center;
            width: 100px;
            padding: 10px 5px;
            box-sizing: border-box;
            // height: 40px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            position: relative;
            // 实际内容
            .timeNum {
                flex-direction: column;
                justify-content: center;
                display: flex;
                // align-items: center;
                width: 100%;
                min-height: 60px;
                color: #333;
                z-index: 1;
            }
            .dateNum {
                top: 0px;
                width: 100%;
                height: 100%;
                color: #d7d7d7;
                font-size: 36px;
                font-weight: bold;
                position: absolute;
                justify-content: center;
                display: flex;
                align-items: center;
                background: #fff;
                z-index: 0;
            }
        }
    }
}

js

    data() {
        return {
            editVisible: false,
            yy: 0,
            mm: 0,
            dd: 0,
            nowStamp: 0,
            dateArr: [],
            dateTimeArr: [],
            lineOne: '',
            rowData: {}
        };
    },    
    methods: {
        // 切换月
        changeMonth(param) {
            this.dd = 1;
            this.mm = this.mm + param;
            if (this.mm > 12) {//右边界
                this.mm = 1;
                this.yy = this.yy + 1;
            }
            if (this.mm < 1) {//左边界
                this.mm = 12;
                this.yy = this.yy - 1;
            }
            this.nowStamp = Date.parse(new Date(this.yy, this.mm - 1, this.dd));//基准时间
            this.updateDateShow(this.nowStamp / 1000);
            this.getCalender(this.nowStamp / 1000);
        },
        // 更新月份显示
        updateDateShow(timeStamp) {
            let yy = new Date(timeStamp * 1000).getFullYear();
            let mm = new Date(timeStamp * 1000).getMonth() + 1;
            mm = mm >= 10 ? mm : '0' + mm;
            this.lineOne = yy + '年' + mm + '月';
        },
        // 获取日历
        getCalender(nowStamp) {
            let arr = [];
            let unit = 24 * 60 * 60;
            let num = nowStamp;
            let endStamp = Date.parse(new Date(this.yy, this.mm, 1)) / 1000 - unit;
            let endDD = new Date(endStamp * 1000).getDate();//当前月的天数
            for (var i = 0; i < endDD; i++) {
                let lessonDate = num + unit * i;
                let week = new Date(lessonDate * 1000).getDay();
                arr.push({
                    lessonDate: lessonDate,//时间戳
                    date: i + 1,//日期
                    week: week == 0 || week == 6 ? '#f2f2f2' : '#f7b865',//星期几
                    timeArr: []
                });
            }
            let weekFirstStamp = arr[0].lessonDate;
            let week = new Date(weekFirstStamp * 1000).getDay();
            let preArr = new Array(week == 0 ? 6 : week - 1);//由1号是星期几定位
            let lastArrNum = 7 - ((arr.length + preArr.length) % 7);
            let lastArr = [];
            if (lastArrNum != 7) {
                lastArr = new Array(lastArrNum);//补齐月末空格
            }
            this.dateArr = [...preArr, ...arr, ...lastArr];
            this.getTime();
        },
        // 更新时间（渲染每日上课时间）
        getTime() {
            const params = {
                classId: this.rowData.classId,
                teacherId: this.rowData.teacherId ? this.rowData.teacherId : 0,
                year: this.yy,
                month: this.mm
            };
            if (!params.teacherId) {
                delete params.teacherId;
            }
            queryLessonDayByClassId(params).then(res => {
                if (res.status == 1) {
                    let arr = res.value;
                    arr.forEach(item => {
                        item.date = new Date(item.startTime * 1000).getDate();
                        item.timeStr = this.transferTime(item.startTime, item.endTime);
                    });
                    this.dateTimeArr = arr;
                    this.dateTimeArr.forEach(timeItem => {
                        this.dateArr.forEach(item => {
                            if (item && item.date == timeItem.date) {
                                item.timeArr.push(timeItem.timeStr);
                            } else {
                                return false;
                            }
                        });
                    });
                }
            });
        },
        // 时间转换（上课时间时间戳转字符串）
        transferTime(start, end) {
            let sdate = new Date(start * 1000);
            let hh = sdate.getHours() < 10 ? '0' + sdate.getHours() : sdate.getHours();
            let min = sdate.getMinutes() < 10 ? '0' + sdate.getMinutes() : sdate.getMinutes();
            let edate = new Date(end * 1000);
            let ehh = edate.getHours() < 10 ? '0' + edate.getHours() : edate.getHours();
            let emin = edate.getMinutes() < 10 ? '0' + edate.getMinutes() : edate.getMinutes();
            let dateStr = hh + ':' + min + '-' + ehh + ':' + emin;
            return dateStr;
        },
        // 打开
        openDetail(row) {
            this.rowData = row;
            this.editVisible = true;
            this.dateArr = [];
            this.dateTimeArr = [];
            this.yy = new Date().getFullYear();
            this.mm = new Date().getMonth() + 1;
            this.nowStamp = Date.parse(new Date(this.yy, this.mm - 1, 1)) / 1000;
            this.updateDateShow(this.nowStamp);
            this.getCalender(this.nowStamp);
        }
    },