效果图
1. el-calendar官方文档内容太少,具体需要css样式,可以根据ui设置自行修改,一下的代码只展示JS的逻辑.
2. 遍历日期，确定显示内容
<el-calendar v-model="value">
<template slot="dateCell" slot-scope="{ date, data }">
<div class="month-date" @click="dateBnt(data.day)">
<!-- 为了每月的开始时间与结束时间-->
<input type="hidden" :value="data.day" />
<div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
<template v-for="(item, index) in calendarData[data.day]">
<div v-if="index < 2" class="is-selected over-text" @click="handleItemClick(item)">
{{ item.content }}
</div>
<i
v-if="index === calendarData[data.day].length - 1 && calendarData[data.day].length > 2"
class="el-icon-caret-bottom calendar-caret"
@click="handleMore( ***$event***, calendarData[data.day], data.day)"
/>
</template>
</div>
</template>
</el-calendar>
1. js的逻辑代码
<script>
export default {
name: 'Day',
components: {
checkDialog,
moreCalendar,
},
data() {
return {
value: new ***Date***(),
calendarData: [],
dailyDay: {
startTime: '',
endTime: '',
period: 2,
},
types: [],
repeatData: {},
width: '480px',
itemArray: [],
moreData: {
date: this.$moment(new ***Date***()).format('YYYY-MM-DD'),
},
};
},
mounted() {
this.nextTPrevClick();
},
methods: {
// 点击上一月/下一月的逻辑判断
setCalendarButton() {
this.$nextTick(() => {
let prevBtn = ***document***.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(1)');
let nextBtn = ***document***.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(3)');
this.dailyDay.startTime = ***document***.querySelector(
'.month .el-calendar-table__row:first-child td:nth-child(1) input',
).value;
this.dailyDay.endTime = ***document***.querySelector(
'.month .el-calendar-table__row:last-child td:last-child input',
).value;
prevBtn.setAttribute('class', 'el-button--text');
// 设置月文字为图标
prevBtn.lastChild.setAttribute('class', 'el-icon-arrow-left');
prevBtn.lastChild.innerHTML = '';
nextBtn.setAttribute('class', 'el-button--text');
nextBtn.lastChild.setAttribute('class', 'el-icon-arrow-right');
nextBtn.lastChild.innerHTML = '';
this.getList();
});
},
// 列表
getList() {
const data = {
types: this.types,
time: this.dailyDay.startTime,
end: this.dailyDay.endTime,
period: this.dailyDay.period,
};
dealtScheduleListApi(data)
.then((res) => {
this.calendarData = res.data;
})
.catch((error) => {
this.$message.error(error.message);
});
},
// 判断日历中为上一个月,下一个月的切换
nextTPrevClick() {
let prevBtn = ***document***.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(1)');
let nextBtn = ***document***.querySelector('.month .el-calendar__button-group .el-button-group>button:nth-child(3)');
let prevFirst = ***document***.querySelector('.month .el-calendar-table__row:first-child');
let nextLast = ***document***.querySelector('.month .el-calendar-table__row:last-child');
let prevArr = prevFirst.getElementsByClassName('prev');
let nextArr = nextLast.getElementsByClassName('next');
for (let i = 0; i < prevArr.length; i++) {
this.tabClick(prevArr[i]);
}
for (let i = 0; i < nextArr.length; i++) {
this.tabClick(nextArr[i]);
}
this.tabClick(prevBtn);
this.tabClick(nextBtn);
},
tabClick(obj) {
obj.addEventListener('click', (e) => {
this.dailyDay.startTime = ***document***.querySelector(
'.month .el-calendar-table__row:first-child td:nth-child(1) input',
).value;
this.dailyDay.endTime = ***document***.querySelector(
'.month .el-calendar-table__row:last-child td:last-child input',
).value;
this.getList();
});
},
dateBnt(data) {
this.$emit('handleMonth', { type: 3, date: data });
},
handleRepeatData(data) {
if (data.type === 1) {
this.getList();
this.$emit('handleMonth', { type: 1, data: [] });
} else {
this.$emit('handleMonth', { type: 2, data: this.itemArray });
}
},
handleItemClick(item) {
this.repeatData = {
title: this.$t('calendar.scheduleview'),
width: this.width,
data: item,
};
this.itemArray = item;
this.$refs.repeatDialog.handleOpen();
},
handleMoreCalendar(data) {
this.handleItemClick(data.data);
},
handleMore(event, item, day) {
this.moreData.data = item;
this.moreData.date = day;
this.$refs.moreCalendar.menuVisible = true;
this.$refs.moreCalendar.rightClick(event);
},
},
};
</script>
总体来说,虽然el-calendar的自定义样式整体的难度较低,但是处理数据还是比较麻烦,最好与后端商量,返回比较合理的数据,是优化el-calendar的重点.本例后端返回的数据如下图所示
以上就是CRMEB讲解的关于el-calendar 自定义我的日程所有内容，有不懂的地方可以下方留言谈论互相学习！
