效果展示 :
1.页面代码
<el-calendar v-model="myDay" id="calendar" :ShowNextPrevMonth = "false">
<!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<!--自定义内容-->
<div v-if="date.toDateString().indexOf(myDay.toDateString().split(' ')[1])!=-1">
<div class="calendar-day" >{{ data.day.split('-').slice(2).join('-') }}</div>
<div v-for="item in calendarData">
<div v-if="(item.years).indexOf(data.day.split('-').slice(0)[0])!=-1">
<div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
<div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
<el-tooltip class="item" effect="dark" :content="item.things" placement="right">
<div v-if="item.remindLevel === 0" class="is-info" @click="jumpRouter(item.urls)">{{item.things}}</div>
<div v-else-if="item.remindLevel === 1" class="is-selected" @click="jumpRouter(item.urls)">{{item.things}}</div>
<div v-else-if="item.remindLevel === 2" class="is-warning" @click="jumpRouter(item.urls)">{{item.things}}</div>
<div v-else-if="item.remindLevel === 9" class="is-danger" @click="jumpRouter(item.urls)">{{item.things}}</div>
</el-tooltip>
</div>
<div v-else></div>
</div>
</div>
<div v-else></div>
</div>
</div>
</template>
</el-calendar>
2.定义数据
myDay: new Date(),
calendarData: [{years:['2020'],months:['03'],days:['02'],things:'测试',urls:'https://www.baidu.com/',remindLevel:0},
{years:['2020'],months:['04'],days:['05'],things:'测试1',urls:'https://www.baidu.com/',remindLevel:0},
{years:['2020'],months:['06'],days:['05'],things:'测试2',urls:'https://www.baidu.com/',remindLevel:0}
]
3.页面样式
<style rel="stylesheet/scss" lang="scss" scoped>
.calendar-day{
text-align: center;
color: #202535;
line-height: 30px;
font-size: 12px;
}
.is-selected{
color: #409EFF;
font-size: 10px;
margin-top: 5px;
}
#calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
content: '当月';
}
.is-info{
color: #909399;
font-size: 10px;
margin-top: 5px;
}
.is-warning{
color: #E6A23C;
font-size: 10px;
margin-top: 5px;
}
.is-danger{
color: #F56C6C;
font-size: 10px;
margin-top: 5px;
}
</style>
<style>
.el-calendar-table td.is-selected {
background-color: rgb(253, 226, 226);
}
.el-calendar-table td.is-today {
background-color: #f2f8fe;
}
</style>
4.方法
jumpRouter(value){
if(value.indexOf('http')!=-1 || value.indexOf('https')!=-1){
window.location.href = value;
}else{
this.$router.push({ path: value });
}
}