element中calendar组件自定义显示（例如：日期上面显示工作负责人）vue+element自定义日历

1. 属性了解（更多）

2. 代码实现

<template>
    <div class="CalendarPage">
        <!-- 按年月筛选，默认当前月份 -->
        <el-date-picker v-model="queryParams.month" type="month" placeholder="选择年月" format="yyyy-MM"
                        value-format="yyyy-MM" style="width:100%" :clearable="false" @change="monthHandle">
                    </el-date-picker>
        <div class="calendar-box">
            <div class="calendar-title">
                {{ calendarTitle }}
            </div>
            <div class="calendar-main">
                <!-- queryParams.month 控制日历显示那个月 -->
                <el-calendar :value="queryParams.month">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div class="cell-box" @click="selectUser(data)">
                            <div class="cell-time">
                                {{ Number(data.day.slice(8, 10)) }}
                            </div>
                            <div v-for="(item, index) in userList" :key="index">
                                <div v-if="item.date == data.day" class="cell-person">
                                    <el-tooltip v-if="item.person.length >= 10" class="item" effect="light"
                                        :content="item.person" placement="top">
                                        <span>{{ item.person }}</span>
                                    </el-tooltip>
                                    <span v-else>{{ item.person }}</span>
                                </div>
                            </div>
                            <div v-if="showSelect(data.day)" class="select-box">选择</div>
                        </div>
                    </template>
                </el-calendar>
            </div>
        </div>
    </div>
</template>
    
<script>
export default {
    name: "CalendarPage",
    data() {
        return {
            // 查询参数
            queryParams: {
                month: this.nowDate().Y_M,
            },
            // 数据
            userList: [
                {
                    date: '2024-02-02',
                    person: '张三',
                },
                {
                    date: '2024-02-05',
                    person: '李四，王五',
                },
                {
                    date: '2024-02-26',
                    person: '张三，李四，王五，赵六，晓晓，张珊珊',
                },
            ],
        };
    },
    computed: {
        calendarTitle() {
            let year = this.queryParams.month.slice(0, 4)
            let month = this.queryParams.month.slice(5, 7)
            month = Number(month)
            let str = year + '年' + month + '自定义标题。。。。。。'
            return str
        },
        showSelect() {
            return function (day) {
                // console.log(day, 'day')
                let nowTime = this.nowDate().Y_M;
                // 是否是这个月
                let isShow_01 = nowTime == day.slice(0, 7) ? true : false
                // 是否选择过人员
                let isShow_02 = this.userList.filter(item => (item.date == day)).length == 0 ? true : false
                return isShow_01 && isShow_02
            }

        },
    },
    methods: {
         // 切换日期
         monthHandle() {
                  //  .....................
        },
        // 点击---------》选择人员
        selectUser(data) {
            console.log(data,'点击')
            let day = data.day;
            // 获取当前点击的人员数据
            let itemList = this.userList.filter((item) => item.date == day)
            console.log(itemList,'itemList')

            let nowTime = this.nowDate().Y_M;  
            // 只能编辑本月
            let isShow_01 = nowTime == day.slice(0, 7) ? true : false
            // 判断是否已经选择了人员，再编辑
            let isShow_02 = this.userList.filter(item => (item.date == day)).length != 0 ? true : false
            console.log(isShow_02, 'isShow_02')
        //   根据需求自定义 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        },

        formatNum(num) {
            return num < 10 ? "0" + num : "" + num
        },

        // 获取时间
        nowDate() {
            var date = new Date();
            var year = this.formatNum(date.getFullYear());
            var month = this.formatNum(date.getMonth() + 1);
            var day = this.formatNum(date.getDate());

            var hours = this.formatNum(date.getHours());
            var minutes = this.formatNum(date.getMinutes());
            var seconds = this.formatNum(date.getSeconds());

            let YMD = year + "-" + month + "-" + day
            let Y_M = year + "-" + month

            return {
                year: year.toString(),
                month: month.toString(),
                day: day.toString(),
                hours: hours.toString(),
                minutes: minutes.toString(),
                seconds: seconds.toString(),
                YMD: YMD,
                Y_M: Y_M,
            }
        }
    },
};
</script>
    
  
<style scoped>

/* 隐藏掉日历上面的快捷按钮 */
/deep/ .el-calendar__header {
    display: none;
}

/* 标题背景 */
/deep/ thead {
    /* background: #EDF6FF; */
    background: #eff3f8;
    height: 70px;
}

/* 标题文字样式 */
/deep/ .el-calendar-table thead th {
    color: #606266;
    font-size: 15px;
    font-weight: 800;
}

/* 修改选中的背景颜色 */
/deep/ .el-calendar-table td.is-selected {
    background-color: transparent;
}

/* 修改今日的文字颜色 */
/deep/ .el-calendar-table td.is-today {
    color: #333;
}

/* 日期居中 */
/deep/ .el-calendar-table .el-calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/ .el-calendar-day:hover {
    /* 鼠标悬浮时的样式 */
    background-color: #cde6ff;
}

.calendar-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.calendar-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.cell-box {
    width: 100%;
    min-height: 70%;
    /* background: red; */
    /* margin-top: 10%; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}



.cell-time {}

.select-box {
    font-size: 13px;
}

.cell-person {
    font-size: 13px;
    color: #0079FE;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    margin-top: 5px;
}

</style>
    

3. 效果图