1.效果图：
html:
<div class="calendar">
<el-calendar v-model="value" id="calendar">
<template slot="dateCell" slot-scope="{data }">
<div style="position: relative">
{{ data.day.split("-").slice(2)[0] }}
<div v-for="item in calendarData" :key="item.id">
<div
v-if="data.day.split('-').slice(1)[0] == item.months"
>
<div
v-if="
item.days.indexOf(
data.day.split('-').slice(2).join('-')
) != -1 && item.type != -1
"
:class="'li-0' + item.type"
class="calendar-for"
>
{{ data.day.split("-").slice(2)[0] }}
</div>
</div>
<div v-else></div>
</div>
</div>
</template>
</el-calendar>
</div>
注：样式要自己调整
背景样式设置css：
.li-00 {
background: #6be5a2 !important;
color: #f1f5fe;
}
.li-01 {
background: #7267d0 !important;
color: #f1f5fe;
}
.li-02 {
background: #fbdd87 !important;
color: #f1f5fe;
}
.li-03 {
background: #f09650 !important;
color: #f1f5fe;
}
.li-04 {
background: #ea6560 !important;
color: #f1f5fe;
}
script参数（data值):
value: new Date(),
calendarData: [
{ id: 1, months: ["09"], days: ["26"], type: 0 },
{ id: 2, months: ["09"], days: ["22"], type: -1 },
{ id: 3, months: ["09"], days: ["18"], type: 3 },
{ id: 4, months: ["09"], days: ["27"], type: 0 },
{ id: 5, months: ["09"], days: ["22"], type: 2 },
{ id: 6, months: ["09"], days: ["20"], type: 1 },
{ id: 7, months: ["09"], days: ["21"], type: 4 },
]
如果想要获取button的点击事件，可参考下列写法（如果有更好的方法，欢迎告知）
mounted(){
this.$nextTick(() => {
// 点击前一个月
let prevBtn = document.querySelector('.el-calendar__button-group');
prevBtn.addEventListener('click',() => {
console.log("获取的是时间戳")
})
});
}
（此方式借鉴了他人的想法，有更好的方式欢迎告知）