自定义一个适合自己项目的el-calendar

由于官方的el-calendar的解释就那么寥寥几笔，导致不知道怎么操作，所以想记录一下

先贴代码：

<!-- 日历表 -->
        <div class="block Calendarselect">
            <el-date-picker v-model="monthValue" type="month" size="mini" style="width: 150px" @change="changeMonth"
                :clearable="false"></el-date-picker>
        </div>
        <el-calendar style="margin: 5px 10px" v-model="nowDate">
            <template #dateCell="{ data }">
                <div style="width: 100%; height: 100%">
                    <div class="spandate">{{ data.day.slice(-2) }}</div>
                    <div v-for="item in arrTime" :key="item.time" :label="item.value" class="calendar-count">
                        <div v-if="data.day == item.time" style="margin-top: 10px;">
                            <span style="text-align: center;display:block;">{{ item.value }}</span>
                        </div>
                    </div>
                </div>
            </template>
        </el-calendar>

其中，第一个div代码是一个时间选择器，用来直接选择月份的，增加用户体验，不至于用户想找好几个月前的数据就一直点上个月，太麻烦。

        双向绑定的属性是monthValue，@change也就是选择的调用的函数是changeMonth，el-calendar日历的属性绑定的nowDate，而再内层的标签就是业务方面的了，首先#dateCell是个插槽的，拿到数据将数据传给下一层的。里面两个div：第一个是显示日历的日期即几月几号或者几号，看里面的data.day怎么取了；第二个div是显示arrTime的数据，判断返回的time是否等于data.day，等于就赋值给这个天

arrTime的值是：

arrTime: [
                {
                    time:"2023-09-06",
                    value:"aaaa",
                },
                {
                    time:"2023-09-05",
                    value:"bbbb",
                }
            ]

关于日期选择的下拉框和el-calendar自带的日期选择：

methods:{


        //日期选择
        changeMonth() {
            let date = new Date(this.nowDate);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, 0);
            const day = date.getDate().toString().padStart(2, 0);
            this.nowDate = year + "-" + month + "-" + day;
            this.getDataCalendar();
        },


},

//监听nowDate属性是否改变，改变就证明是点击el-calendar自带的按钮选择了

watch:{

        //只要时间改变了就调用查询后台接口就可以了
        nowDate(val,oldVal){
            if(val!=oldVal){
                const year = val.getFullYear();
                ....
                this.nowDate = year+"-"+....
                this.后台接口函数
            }
        }

}

附测试代码：

<template>
    <el-container>
        <!-- 日历表 -->
        <div class="block Calendarselect">
            <el-date-picker v-model="monthValue" type="month" size="mini" style="width: 150px" @change="changeMonth"
                :clearable="false"></el-date-picker>
        </div>
        <el-calendar style="margin: 5px 10px" v-model="nowDate">
            <template #dateCell="{ data }">
                <div style="width: 100%; height: 100%">
                    <div class="spandate">{{ data.day.slice(-2) }}</div>
                    <div v-for="item in arrTime" :key="item.time" :label="item.value" class="calendar-count">
                        <div v-if="data.day == item.time" style="margin-top: 10px;">
                            <span style="text-align: center;display:block;">{{ item.value }}</span>
                        </div>
                    </div>
                </div>
            </template>
        </el-calendar>
    </el-container>
</template>

<script>
import { getDataCalendar } from "../../api/test/dataCalendar";
let point = null;
export default {
    data() {
        return {
            areaList: [],
            areaProps: { children: "children", label: "label" },
            Data: [],
            subName: "",
            nowDate: "",
            arrTime: [
                {
                    time:"2023-09-06",
                    value:"aaaa",
                },
                {
                    time:"2023-09-05",
                    value:"bbbb",
                }
            ]
        }
    },
    methods: {

        //月下拉选框
        changeMonth() {
            let date = new Date(this.nowDate);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, 0);
            const day = date.getDate().toString().padStart(2, 0);
            this.nowDate = year + "-" + month + "-" + day;
            this.getDataCalendar();
        },

        //查询该月份的所有内容
      getDataCalendar() {
        getDataCalendar({
                newTime: this.nowDate,
                subId: this.Data.subId,
            }).then((res) => {
                if (res.code == 200) {
                    this.arrTime = res.data;
                }
            });
        }



    },
    computed: {

        monthValue: {
            get: function () {
                return this.nowDate;
            },
            set: function (newValue) {
                this.nowDate = newValue;
            },
        },


    },
    async mounted() {
        // 格式化时间
        let now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, 0);
        const day = now.getDate().toString().padStart(2, 0);
        this.nowDate = year + "-" + month + "-" + day;

    },

    watch:{
  
      //只要时间改变了就调用查询后台接口就可以了
      nowDate(val,oldVal){
        if(val!=oldVal){
          const year = val.getFullYear();
          const month = (val.getMonth()+1).toString().padStart(2.0);
          const day = val.getDate().toString().padStart(2.0);
          this.nowDate = year+"-"+month+"-"+day;
          this.getDataCalendar()
        }
      }

    }
}
</script>

<style scoped lang="less">
//group-button-radio样式
::v-deep .el-radio-group {
    label {
        width: auto;
    }
}

//日历样式
.Calendarselect {
    top: 61px;
    position: relative;
    text-align: right;
    padding-right: 16px;
}

/* 日历表格今天样式 */
.el-backtop,
.el-calendar-table td.is-today {
    color: #7000BD;
}

/* 除去日历表格的padding */
.el-calendar-table .el-calendar-day {
    height: auto;
    padding: 0;
}

/* 日历表格鼠标滑动样式 */
.el-calendar-table .el-calendar-day:hover {
    background-color: #F26C08 !important;
    color: white;
}

/* 日历表格选择日期样式 */
.el-calendar-table td.is-selected {
    background-color: #7000BD;
    color: white;
}

.Calendarselect {
    top: 18px;
    position: relative;
    text-align: right;
    left: 46%;
}

//去掉日历中自带的年月按钮
.el-button-group {
    display: none !important;
}
</style>