<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app2">
<el-calendar>
<template slot="dateCell" slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p>
<div v-for="item in calendarData">
<p v-if="data.day==item.bdate" style="color: red;">人数:{{item.num}}</p>
</div>
</template>
</el-calendar>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let _this = null;
new Vue({
el: '#app2',
data: function () {
return {
calendarData: [],
value: new Date()
}
},
mounted() {
_this = this
_this.$nextTick(() => {
// 点击前一个月
let prevBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(1)');
prevBtn.addEventListener('click', (e) => {
console.log(this.value);
_this.getbirthdayNum();
})
})
_this.$nextTick(() => {
// 点击后一个月
let prevBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:last-child');
prevBtn.addEventListener('click', () => {
console.log(this.value);
_this.getbirthdayNum();
})
})
_this.getbirthdayNum();
},
methods: {
getbirthdayNum(){
_this.calendarData.push({ bdate: moment().format('YYYY-MM-DD'), num: 2 }, { bdate:moment(moment().add(1, 'days')).format('YYYY-MM-DD'), num: 5 })
}
}
})
</script>
</html>
