<template><div><div @click="handleLast()">上一周</div><div @click="handleNext()">下一周</div><el-calendarref="monChild"v-model="value":first-day-of-week="7":range="[starttime, endtime]"style="height: 82px;"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><!-- slot="dateCell" --><!-- slot-scope="{date, data}"> --><template #dateCell="{ data }"><div:class="data.isSelected ? 'is-selected' : ''"@click="handleClick(data)"><div style="line-height: 18px">{{ parseTime(data.day, "{d}") }}</div><!-- 圆点显示 --><div class="g-flexcenter"><div v-if="dateList.findIndex((res) => res.scheduleTime === data.day) !==-1" :class="data.isSelected? 'g-color-blue': 'g-color-blue'">·</div></div></div></template></el-calendar></div>
</template><script>import dayjs from "dayjs";export default {name: "",data() {return {value: new Date(), //选中的日期 默认当天starttime: "",endtime: "",timeLength: "", //时长};},created() {this.weekCheckingIn();},methods: {/**获取近一周的日期 开始周起始日，结束周结束日*/weekCheckingIn() {let now = new Date(this.value);let nowTime = now.getTime();let day = now.getDay() || 7; // 不加 || 7.周末会变成下周一let oneDayTime = 24 * 60 * 60 * 1000;let SundayTime = nowTime - day * oneDayTime; //显示周日let SaturdayTime = nowTime + (7 - day - 1) * oneDayTime; //显示周六this.starttime = dayjs(SundayTime).format("YYYY-MM-DD");this.endtime = dayjs(SaturdayTime).format("YYYY-MM-DD");},/**上一周 */handleLast() {const last = new Date(this.value);last.setDate(last.getDate() - 7); //日期相加减this.value = last;this.weekCheckingIn();},/**下一周 */handleNext() {const next = new Date(this.value);next.setDate(next.getDate() + 7);this.value = next;this.weekCheckingIn();},/**选中的日期 */handleClick(data) {this.value = data.day;//调详情列表},//给list添加一个字段timeLength// this.$set(item,'timeLength',(new Date(endTime) - new Date(startTime)) / (1000 * 60 * 60))},
};
</script><style lang="scss" scoped>::v-deep .el-calendar__header {display: none;font-size: 12px;padding: 10px 0px;.el-button--mini {padding: 2px 5px;border-radius: 3px;}
}
::v-deep .el-calendar__body {padding: 0;.el-calendar-table thead th {font-size: 12px;font-weight: 400;color: #8f959e;padding: 12px 0 8px !important;}
}::v-deep .el-calendar-table .el-calendar-day {height: auto;padding: 5px;}
::v-deep .el-calendar-table td.is-selected .el-calendar-day {height: 27px !important;width: 27px !important;background: none !important;background-color: #ebeefc !important;font-size: 14px !important;font-weight: bold !important;color: #ffffff !important;background: #3370ff !important;
}
::v-deep .el-calendar-table tr td {border: 0px;text-align: center;font-weight: bold !important;
}
::v-deep .el-calendar-table td.is-selected {display: flex;justify-content: center;background: #fff;.el-calendar-day {width: 34px;height: 31px;background: url("~@/assets/images/workbench/icon_date.png") no-repeat;background-size: 100% 100%;border-radius: 50%;// font-family: PingFang SC;font-weight: bold;color: #409eff;}
}
::v-deep .el-calendar-table td :hover {background: none;color: #409eff;
}
::v-deep .el-calendar-table td.is-selected :hover {border-radius: 50%;
}</style>
