首先我们可以在组件内使用或者创建一个组件
因为这个组件可能功能复杂，所以这次我们重新创建一个组件
名叫MyCalender.vue
<template><el-calendar v-model="curDate" /></template><script>export default {data() {return {curDate: new Date()}}}</script>
样式代码
<style lang="scss" scoped>.select-box {display: flex;justify-content: flex-end;}::v-deep .el-calendar-day {height: auto;}::v-deep .el-calendar-table__row td::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{border:none;}.date-content {height: 40px;text-align: center;line-height: 40px;font-size: 14px;}.date-content .rest {color: #fff;border-radius: 50%;background: rgb(250, 124, 77);width: 20px;height: 20px;line-height: 20px;display: inline-block;font-size: 12px;margin-left: 10px;}.date-content .text{width: 20px;height: 20px;line-height: 20px;display: inline-block;}::v-deep .el-calendar-table td.is-selected .text{background: #409eff;color: #fff;border-radius: 50%;}::v-deep .el-calendar__header {display: none}</style>
导入这个组件
import MyCalender from './MyCalender.vue'components: {MyCalender },<MyCalender />
然后假如我们想要设置休息日在日历中显示一个休字
在组件中添加一下代码
<template slot="dateCell"><div class="date-content"><span class="text">01</span><span class="rest">休</span></div></template>
这样我们得到了一下样式
首先修改一下日期
最后那天休息，比如周六日
v-show="isWeekend(date)"
isWeekend(date) {const dates = date.getDay()if (dates === 0 || dates === 6) {return true} else {return false}},
最后得出一下结果
