el-calendar修改默认样式，el-calendar修改筛选条件，el-calendar样式灰色部分不可点击

1、修改筛选条件

2、样式灰色部分不可点击

直接上代码（全部如下）

<template>
  <div class="calendar_class">
    <div class="align-items header">
        <div class="align-items">
            <img src="../../../public/img/icon-a.png" class="icon-a" />
            <div class="title">考试日历</div>
        </div>
        <el-date-picker
          v-model="params.date"
          size="small"
          type="month"
          change="onChangeDate"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="选择日期">
        </el-date-picker>
    </div>
    <el-calendar v-model="calendarValue">
      <template slot="dateCell" slot-scope="{date, data}">
        <el-popover
          popper-class="popover-bgcolor"
          v-if="data.day.split('-')[1] === '12'" 
          width="400"
          placement="top"
          trigger="click">
          <div class="popover-bgc">
              <div style="color:#fff;font-size:12px;">{{ data.day }}</div>
              <div class="one">岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20</div>
              <div class="two">岳麓区20...</div>
              <div class="three">岳麓区20...</div>
          </div>
          <div  slot="reference">
              <div>{{ data.day.split('-')[2]}}</div>
              <div class="one">岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20岳麓区20</div>
              <div class="two">岳麓区20...</div>
              <div class="three">岳麓区20...</div>
          </div>
        </el-popover>
        <div  v-else>
            <div>{{ data.day.split('-')[2]}}</div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        calendarValue: null,
        params:{
          date:null
        }
      }
    },
    created() {
      this.params.date =  this.onFilterDate();
    },
    methods: {
      onFilterDate(date){
          let myDate = date || new Date();
          let y = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
          let m = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
          m = m > 9 ? m : `0${m}`;
          let d = myDate.getDate();        //获取当前日(1-31)
          d = d > 9 ? d : `0${d}`;
          return `${y}-${m}-${d}`;
      },
      onChangeDate(){
        this.calendarValue = this.params.date;
      },
    }
  }

</script>


<style scoped>

  .align-items{
    display: flex;
    align-items: center;
  }
  .header{
    padding: 20px 20px 0 ;
    background-color: #fff;
    justify-content: space-between;
  }
  .icon-a{
    width: 20px;
    height: 20px;
  }
  .title{
    color: #101010;
    font-size: 16px;
  }

  .one{
    height: 20px;
    padding: 0 4px;
    line-height: 20px;
    border-left: 3px solid #3797FF;
    background: #DBECFF;
    font-size: 12px;
    margin-top: 6px;
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
  }
  .two{
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    border-left: 3px solid #FF6161;
    background: #FFE1E1;
    font-size: 12px;
    margin-top: 6px;
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
  }
  .three{
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    padding: 0 4px;
    border-left: 3px solid #4EC95B;
    background: #E4FFE6;
    margin-top: 6px;
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
  }

  .popover-bgc {
    background-color: #000 !important; 
    padding: 12px;
    border-radius: 6px;
  }
  .popover-bgc .one,
  .popover-bgc .two,
  .popover-bgc .three{
    background-color: #000 !important;
    color: #fff; 
  }

</style>


<style>
  .popover-bgcolor{
    padding: 0 !important;
  }
  .calendar_class .el-calendar-table:not(.is-range) td.next, .calendar_class .el-calendar-table:not(.is-range) td.prev{
    pointer-events: none;
  }
  .calendar_class .el-calendar__header{
    display: none !important;
  }

  .calendar_class .el-calendar__body{
    padding: 0 20px 35px
  }

  .calendar_class .el-calendar-day{
    height: 120px !important;
  }


  .el-popper[x-placement^=top] .popper__arrow::after {
    border-top-color: #000 !important; 
  }
</style>