element ui 日历空控件添加农历 节气和家假日

背景:
按照客户需求,需要在日历控件上添加农历和节气 ,但是element ui控件中无弄里控件只能引入外部js来完成该功能,
1.引入calendar.js
2.调用方法 显示农历
2.1

// 公历转农历
    solarToLunar (slotDate, slotData) {
      let solarDayArr = slotData.day.split('-')
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])/* global calendar */
      // 农历日期
      let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
      if (lunarMD.includes('初一')) {
        // 每月初一 显示当前月 如正月初一 显示"正月"
        lunarMD = lunarMD.substr(0, 2)
      } else {
        // 每月初一以外 不显示当前月 如正月初十 显示"初十"
        lunarMD = lunarMD.slice(2)
      }
      // 公历节日\农历节日\农历节气
      let festAndTerm = []
      festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
      festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')
      let result = ''
      if (festAndTerm === '') {
        result = lunarMD
      } else {
        result = festAndTerm
      }
      return result
    },

前端 显示

<template  slot="dateCell" slot-scope="{date, data}">
          <el-row>
            <el-row v-if="date.getMonth() !== value.getMonth()" style="text-align: center">
              <span style="float: left;" v-if="isWeek(date)" class="rest">休</span>
              <span style="float: left;" v-if="isNoWeek(date)" class="rest1">班</span>
            {{ data.day.split('-').slice(2).join('-') }}
            <div style="float: right;" class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarToLunar(date, data) }} </div>
            </el-row>
            <el-row>
              <el-col :span="2" style="margin-left: 15% ;width: 50%; float: left;" v-if="date.getMonth() === value.getMonth()" :style="{borderRadius: '27px',textAlign: 'center',fontSize: '14px',backgroundColor:'#72bfc3',fontWeight: 'bold',color: isZb(data.day,'9') ? '#109EFF':'black',backgroundColor: isZb(data.day,'9') ? '#9dd3bb':'white'}">
                <span style="float: left;" v-if="isWeek(date)" class="rest">休</span>
                <span style="float: left;" v-if="isNoWeek(date)" class="rest1">班</span>
               <span style="font-weight: bold; font-size: 16px;"> {{ data.day.split('-').slice(2).join('-') }}</span>
                <div style="float: right;" class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarToLunar(date, data) }} </div></el-col>
            </el-row>
</template>

2.判断是否休假/补班 方法 补班和休假因为每年时间不同 所以从后端获取

 // 是否节假日
    isFestival (slotDate, slotData) {
      let solarDayArr = slotData.day.split('-')
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])/* global calendar */
      // 公历节日\农历节日\农历节气
      let festAndTerm = []
      festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
      festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')
      return festAndTerm
    },
    // 判断节假日
    isWeek (data) {
      let month = (data.getMonth() + 1).toString().length === 2 ? (data.getMonth() + 1) : ('0' + (data.getMonth() + 1))
      let leaveDay = data.getUTCFullYear() + '-' + month + '-' + data.getDate()
      return this.leaveOptions.includes(leaveDay)
    },
    // 判断补班
    isNoWeek (data) {
      let month = (data.getMonth() + 1).toString().length === 2 ? (data.getMonth() + 1) : ('0' + (data.getMonth() + 1))
      let leaveDay = data.getUTCFullYear() + '-' + month + '-' + data.getDate()
      return this.leaveOptions1.includes(leaveDay)
    },

3效果图:

参考大佬文章