效果图 点击即可修改模块颜色
vue代码如下
<template>
<div>
<el-row>
<el-col style="width: 70%" :push="4">
<el-calendar v-model="value" :range="['2022-09-05', '2022-10-02']" :aria-placeholder="9">
<template slot="dateCell" slot-scope="{date,data}">
<p :id="formatDate(date)" class="sbc3" @click="alterCal(date)">
{{ data.day.split('-').slice(1).join('-') }}
</p>
</template>
</el-calendar>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
value: new Date(),
startDate: '2022-09-26',
endDate: '2022-10-03'
}
},
methods: {
alterCal(date) {
const calId = this.formatDate(date)
const calElement = document.getElementById(calId)
if (calElement.style.backgroundColor === 'rgb(245, 108, 108)') {
calElement.style.backgroundColor = '#409EFF'
} else {
calElement.style.backgroundColor = '#F56C6C'
}
},
formatDate(date) {
const d = new Date(date)
let month = '' + (d.getMonth() + 1)
let day = '' + d.getDate()
const year = d.getFullYear()
if (month.length < 2) month = '0' + month
if (day.length < 2) day = '0' + day
return [year, month, day].join('-')
}
}
}
</script>
<style scoped>
.sbc3 {
width: 100%;
height: 100%;
background-color: #409EFF;
cursor: pointer;
margin: 0 auto;
color: black;
display: flex;
justify-content: center;
align-items: center;
}
.el-calendar-day {
cursor: none !important;
}
</style>
