Element-ui自定义日历

效果图：

 

实现代码:

<el-calendar v-model="currentMonthFirstDay">
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <template v-if="timeData.includes(data.day)">
              <div class="date_title">
                {{ data.day.split('-').slice(2).join('-') }}
                <i class="el-icon-edit"></i>
              </div>
              <template v-if="calendarDataObj[data.day]">
                <div class="calendar_l_content l_blue">
                  <div> 人数</div>
                  <div> {{calendarDataObj[data.day].numPeople}} 人</div>
                </div>
                <div class="calendar_l_content l_orange">
                  <div> 工时</div>
                  <div>{{calendarDataObj[data.day].workingHours}} 小时</div>
                </div>
              </template>
            </template>
          </template>
</el-calendar>

因为 设计的不在 当前月份 不展示在日历上面，所以timeData里面是当前月的一个集合，用当前月和日历的当前天比较，如果不在里面就不显示出来，date.day里面的格式是 YYYY-MM-DD的，所以timeData里面的日期格式也要使用这种格式，不然展示不出来。

timeData我是直接定义在了 computed 计算属性里面，因为我们只展示 上个月当前月和下个月的数据

timeData(){
      const now = this.currentDate;
      let count = 0;
      switch (this.tabPosition) {
        case 'lastMonth':
          count = -1
          break;
        case 'thisMonth':
          count = 0
          break
        case 'nextMonth':
          count = 1
          break
        default:
          count = 0
      }
      let year = now.getFullYear();
      let month = now.getMonth() + 1 + count
      // 获取指定月份的天数
      const daysInMonth = new Date(year, month, 0).getDate();
      let daysInMonthList = []
      // 使用for循环将天数添加到数组中
      for (let i = 1; i <= daysInMonth; i++) {
        daysInMonthList.push(dayjs(`${year}-${month}-${i}`).format('YYYY-MM-DD'))
      }
      return daysInMonthList
    }

 calendarDataObj:对象里面我想的是把后台返回数据重新组装一下，用时间当成对象的Key值，   把当前日期的各种属性直接添加到这个对象上面， 直接使用calendarDataObj[data.day]获取数据，date.day里面的格式是 YYYY-MM-DD的.      

getCalendarData(){
      this.calendarDataObj =  this.calendarDatas.reduce((accumulator, currentObject) => {
          accumulator[currentObject.data] = {
            ...currentObject
          }
        return accumulator;
      }, {});
    }

仅此记录一下，提供一下参考，有更好的方式也可以留言，我参考一下。