element 日历，点击上个月下个月的方法

如图所示，日历中有内容的日期有标识，可点击d

<el-calendar v-model="value" @input="handleCalendarChange">
            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                <div class="cellDate">
                {{ data.day.split('-').slice(1).join('.') }}
                <div class="cellBtn" v-for="(item,index) in calendar" :key="index">
                    
                    <div v-if="item.date==data.day">
                        <div class="svgDiv" :style="{width:svgDivWidth+'px',height:svgDivHeight+'px'}"  @click="handleClick(item.date,item.list)">
                           
                            <i :class="['quan',list.type==1?'blue':'orange']"  v-for="(list,i) in item.list" :key="i"></i>
                        </div>
                        
                    </div>
                    
                </div>
                </div>
                
                
            </template>
        </el-calendar>

export default {
        name: "treeTableIndex",
        components: {
            EditDialog,
            Echarts
        },
        data() {
            return {
                value: new Date(),
                calendar:[
                    {
                        date:'2024-05-21',
                        list:[
                            {
                                type:1,
                                list:[]
                            },
                            {
                                type:2,
                                list:[]
                                
                            }
                        ]
                    },
                    {
                        date:'2024-05-12',
                        list:[
                            {
                                type:2,
                                list:[]
                                
                            }
                        ]
                    },
                    {
                        date:'2024-05-08',
                        list:[
                            {
                                type:1,
                                list:[]
                            },
                        ]
                    },
                    {
                        date:'2024-05-06',
                        list:[
                            {
                                type:1,
                                list:[]
                            },
                        ]
                    },
                ],
                svgDivWidth:0,
                svgDivHeight:0,
            };
        },
        methods: {
            handleCalendarChange(value) {
				// 格式化日期为 "yyyy-MM-dd" 格式
				const formattedDate = this.formatDateString(value);
			},
            formatDateString(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
            handleClick(date,data) {},
            handleHeader(){
                this.$nextTick(() => {
                    // 点击前一个月
                    let prevBtn = document.querySelector(
                        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
                    );
                    prevBtn.addEventListener("click", (e) => {});
                    //点击下一个月
                    let nextBtn = document.querySelector(
                        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
                    );
                    nextBtn.addEventListener("click", (e) => {});
                    //点击今天
                    let todayBtn = document.querySelector(
                        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
                    );
                    todayBtn.addEventListener("click", (e) => {
                        var currentDate = new Date();
                        var month = currentDate.getMonth() + 1;  // 月份从0开始，需要加1
                        month=month<10?'0'+month:month
                        var year = currentDate.getFullYear();
                    });
                    });
            },
            handleResize(){
                let elementResizeDetectorMaker = require("element-resize-detector");
                let erd = elementResizeDetectorMaker();
                let _this=this
                erd.listenTo(document.getElementsByClassName("cellDate"), function(element) {
                    _this.svgDivHeight = element.offsetHeight;
                    _this.svgDivWidth = element.offsetWidth;
                });
            
            },
        },
        mounted: function () {
            this.handleHeader();
            this.handleResize();
        },
    };

<style scoped>
::v-deep .el-calendar-table td.is-selected{
    background: none!important;;
}
::v-deep .el-calendar-table .el-calendar-day{
    height: 45px;
    padding: 0;
}
::v-deep .el-calendar-table thead th:before{
    content: '周';
}

.cellDate{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
}
.cellBtn{
    position: absolute;
    right: 0;
}
.svgDiv{
    margin: 0px 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    cursor: pointer;
}
.quan{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px 10px 2px 0;
}
.blue{
    background:#1e9eff;
    background: -webkit-linear-gradient(-90deg, #5bf3ff, #1e9eff);
}
.orange{
    background:#f77925;
    background: -webkit-linear-gradient(-90deg, #fad45e, #f77925);
}