element ui中el-calendar日历自定义样式

1、效果图

2、具体实现

• templete部分：

<el-calendar v-model="planValue">
  <template slot="dateCell" slot-scope="{ date, data }">
     <div class="date-content">
       <span class="text">{{ getDay(date) }}</span>
       <div v-for="item in oneYearData" :key="item.planDay">
         <span
           class="rest"
           v-if="item.planDay === data.day && item.type === 'REST'"
         >
           休
         </span>
         <span
           class="work"
           v-if="item.planDay === data.day && item.type === 'WORK'"
         >
           工
         </span>
       </div>
     </div>
   </template>
 </el-calendar>

• data部分：

data () {
    return {
      planValue: new Date(),
       oneYearData: [],
    }
  },

• methods部分：

methods: {
	// 标注今天日期
    getDay (date) {
	    // console.log(date)
	    return date.getDate()
	},
}

• css部分：

.text {
    // width: 20px;
    // height: 20px;
    // line-height: 20px;
    width: 100%;
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 0);
  }
  .rest {
    color: #073cea;
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0);
    // &::after {
    //   content: '';
    //   display: block;
    //   position: absolute;
    //   z-index: -1;
    //   top: -5px;
    //   left: -8px;
    //   width: 30px;
    //   height: 30px;
    //   border-radius: 15px;
    //   background: rgba(21, 232, 102, 0.5);
    // }
  }
  .work {
    border-radius: 15px;
    color: #f10909;
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0);
    // &::after {
    //   content: '';
    //   display: block;
    //   position: absolute;
    //   z-index: -1;
    //   top: -5px;
    //   left: -8px;
    //   width: 30px;
    //   height: 30px;
    //   border-radius: 15px;
    //   background: rgba(236, 15, 15, 0.5);
    // }