vue 自己捣鼓周日程日历组件

需求：想要一个周日程表，记录每天的计划，点击可查看详情。可自定义时间段通过后台获取时间段显示

分析：

通过需求，超级课程表app这款软件其中课表和这个需求很像，只不过这个需求第一列的时间段是自定义的，不是上午下午两个，但是原理都差不多
原本想找一些第三方插件使用，由于时间充足，而且自己也想封装成一个组件方便以后或许会碰到类似的需求，于是自己手动写了一个日程日历。
效果如下

 优化修改：数据量大时，格子显示太长问题，这里进行了优化，如果超过2个就进行展开与收缩操作

例子

<template><div id="app"><WSchedule :planList="timePeriodList" :isFirstDayOfMondayOrSunday="7" :hasNumExpend="2" @handleDetail="handleDetail" @handleCardDetail="handleCardDetail" @changeWeek="changeWeek"><template v-slot:thing="{row}"><span>时段：{{ row.timePeriod }}</span><span>课程：{{ row.course }}</span><span>值班员：{{ row.watchman }}</span><span>地点：{{ row.place }}</span></template></WSchedule></div>
</template><script>import WSchedule from '@/components/WeekSchedule'export default {name: 'App',components: {WSchedule,},data() {/*** 获取当天时间* @returns {string}*/function getCurDay(num = 0) {var datetime = new Date();var year = datetime.getFullYear();var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;let day = datetime.getDate()if ((day + num) > 0) {day = (day + num) < 10 ? "0" + (datetime.getDate() + num) : datetime.getDate() + num;} else {day = (day - num) < 10 ? "0" + (datetime.getDate() - num) : datetime.getDate() - num;}return `${year}-${month}-${day}`}return {timePeriodList: [{timePeriod: '8:00~10:00',schedule: [{isExpend: false,[getCurDay()]: [{timePeriod: '8:00~10:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},{timePeriod: '8:00~10:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 2,},{timePeriod: '8:00~10:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 3,},],},{isExpend: false,[getCurDay(-1)]: [{id: 1,timePeriod: '8:00~10:00',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},]}]},{timePeriod: '12:00~14:00',schedule: [{isExpend: false,[getCurDay()]: [{timePeriod: '12:00~14:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 2,},{timePeriod: '12:00~14:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 3,},],},{isExpend: false,[getCurDay(-1)]: [{timePeriod: '12:00~14:00',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},{timePeriod: '实验室1',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},{timePeriod: '实验室1',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},]}]},{timePeriod: '14:00~16:00',schedule: []},],}},methods: {/*** 点击详情* @param row*/handleDetail(row){console.log(row)},/