elementui el-calendar日历组件使用

需求是需要在日历基础上展示每天排班记录及排班详情、当天是否有异常情况。完成效果：

elementui自带切换月份按钮与设计图不符，所以我隐藏了插件自带的按钮，自己加了个左右切换图标，代码如下：

// 隐藏组件自带切换月份按钮
::v-deep.el-calendar .el-calendar__button-group{
   display: none;
}

在html中新增
<!-- 日历两侧年月切换 -->
<img class="month-cut-img month-cut-left" @click="dateCut(1)" src="../../../../assets/img/scheduling/calendar-month-left.png" />
<img class="month-cut-img month-cut-right" @click="dateCut(2)" src="../../../../assets/img/scheduling/calendar-month-right.png" />
<img class="month-cut-img year-cut-left" @click="dateCut(3)" src="../../../../assets/img/scheduling/calendar-year-left.png" />
<img class="month-cut-img year-cut-right" @click="dateCut(4)" src="../../../../assets/img/scheduling/calendar-year-right.png" />

具体代码实现：

<!-- 日历两侧年月切换 -->
<img class="month-cut-img month-cut-left" @click="dateCut(1)" src="../../../../assets/img/scheduling/calendar-month-left.png" />
<img class="month-cut-img month-cut-right" @click="dateCut(2)" src="../../../../assets/img/scheduling/calendar-month-right.png" />
<img class="month-cut-img year-cut-left" @click="dateCut(3)" src="../../../../assets/img/scheduling/calendar-year-left.png" />
<img class="month-cut-img year-cut-right" @click="dateCut(4)" src="../../../../assets/img/scheduling/calendar-year-right.png" />
<!-- 日历 -->
<el-calendar v-model="calendarVal">
  <template slot="dateCell" slot-scope="{date, data}">
    <div @click="viewDetail(data.day)">
      <div class="date">{{ data.day.slice(8) }}</div>
      <div v-for="item in schedulingData.schedulingHandle">
        <div v-if="item.date == data.day">
          <!-- 是否异常 -->
          <div class="abnormal-state" v-if="item.hasException === true"></div>
          <!-- 排版情况 === memberAmount：根据是否有值班成员判断是否排班;isPast：日期是否已过；isToday：是否是今天  -->
          <div class="scheduling-state scheduling-state-notset" v-if="item.memberAmount === 0">
            <img src="../../../../assets/img/scheduling/scheduling-state1.png">
            <span class="f14">未排</span>
          </div>
          <div class="scheduling-state scheduling-state-ordering1" v-if="item.memberAmount > 0 && item.isPast === true && item.isToday === false">
            <img src="../../../../assets/img/scheduling/scheduling-state2.png">
            <span class="f14">已排</span>
          </div>
          <div class="scheduling-state scheduling-state-ordering2" v-if="item.memberAmount > 0 && item.isToday === true">
            <img src="../../../../assets/img/scheduling/scheduling-state3.png">
            <span class="f14">已排</span>
          </div>
          <div class="scheduling-state scheduling-state-ordering3" v-if="item.memberAmount > 0 && item.isPast === false && item.isToday === false">
            <img src="../../../../assets/img/scheduling/scheduling-state4.png">
             <span class="f14">已排</span>
          </div>
          <!-- 当日排班情况弹窗 -->
          <div class="today-scheduling-detail" v-if="item.showTodayScheduling">
            <div class="today-scheduling-title">当日排班</div>
            <div class="today-scheduling-center">
              <div class="today-scheduling-item" v-for="item1 in item.todayDetail">
                <div class="name1">{{ item1.shiftName }}</div>
                <div class="name2">{{ item1.crewName }}</div>
              </div>
            </div>
            <div class="today-scheduling-footer">
              <div class="edit"><span class="el-icon-edit"></span>编辑</div>
              <div class="view"><span class="el-icon-view"></span>查看</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
</el-calendar>
<div class="back-to-today" @click="dateCut(5)">回到今天</div>

dateCut(type) {
  // type：1 月份左侧按钮，2 月份右侧按钮，3 年份左侧按钮，4 年份右侧按钮，5 回到今天
  if (type === 1) {
    this.calendarVal = new Date(this.calendarVal).getMonth() > 0 ?
      new Date(this.calendarVal).getFullYear() + '-' + new Date(this.calendarVal).getMonth() + '-01' :
      new Date(this.calendarVal).getFullYear() - 1 + '-12' + '-01'
  } else if (type === 2) {
    this.calendarVal = new Date(this.calendarVal).getMonth() < 11 ?
      new Date(this.calendarVal).getFullYear() + '-' + (Number(new Date(this.calendarVal).getMonth()) + 2) + '-01' :
      new Date(this.calendarVal).getFullYear() + 1 + '-01' + '-01'
  } else if (type === 3) {
    this.calendarVal = new Date(this.calendarVal).getFullYear() - 1 + '-' + (Number(new Date(this.calendarVal).getMonth()) + 1) + '-01'
  } else if (type === 4) {
     this.calendarVal = new Date(this.calendarVal).getFullYear() + 1 + '-' + (Number(new Date(this.calendarVal).getMonth()) + 1) + '-01'
  } else if (type === 5) {
     this.calendarVal = this.getDate(new Date()).fullDate
  }
  this.getData() // 调接口数据
},

css代码

// 日历组件样式修改
  .is-selected {
    color: #1989FA;
  }
  ::v-deep.el-calendar{
    height: calc(100% - 35px);
  }
  ::v-deep.el-calendar .el-calendar__body{
    padding-bottom: 16px;
    height: calc(100% - 80px);
  }
  ::v-deep.el-calendar .el-calendar-table{
    height: 100%;
  }
  .el-backtop, ::v-deep.el-calendar .el-calendar-table td.is-today .date{
    //background: #5E97F9;
    //box-shadow: 0px 4px 7px 0px rgba(113,208,255,0.5);
    //color: #fff;
    background: #DCE9FF;
    color: rgba(0,0,0,0.45);
  }
  .el-backtop, ::v-deep.el-calendar .el-calendar-table .date:hover{
    background: #DCE9FF;
    color: rgba(0,0,0,0.45);
  }
  ::v-deep.el-calendar .el-calendar-table .el-calendar-day:hover{
    background: none;
  }
  ::v-deep.el-calendar .el-calendar-table td.is-selected{
    background: none;
  }
  ::v-deep.el-calendar .el-calendar-table td.is-selected .date{
    background: #5E97F9;
    box-shadow: 0px 4px 7px 0px rgba(113,208,255,0.5);
    color: #fff;
  }
  ::v-deep.el-calendar .el-calendar__button-group{
    display: none;
  }
  ::v-deep.el-calendar .el-calendar__title{
    margin: 0 auto;
  }
  ::v-deep.el-calendar .el-calendar-table .el-calendar-day{
    position: relative;
  }

日历组件就完成了，有任何问题欢迎大家留言！