el-ui自定义日历,控制只显示本月数据，点击单元格变色，跳转页面

效果展示 ：

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 });
                 }
                 
               }