[JavaScript知识库]vue自定义el-calendar

官方文档内容太少。。。。找死我了
这次的需求是：周六日字体为红色；显示公休日；点击调取接口，更改日期状态。

不管是类名还是方法都是语义化起的，所以没什么注释。。

html代码 ↓

<template>
  <div class="container">
    <el-calendar
      v-model="currentDay"
      style="width: 800px; margin: 0 auto"
    >
      <template slot="dateCell" slot-scope="{ date, data }">
        <div @click="chooseDay(data)" class="cell-container">
          <div class="word-container">
            <div
              class="date"
              :class="
                date.getDay() === 6 || date.getDay() === 0 ? 'red-word' : ''
              "
            >
              {{ data.day.split("-").slice(2).join("-") }}
            </div>
            <div class="solar-terms">
              {{ solarToLunar(date, data) }}
            </div>
            <div class="festival">
              {{ isVacation(date, data) ? "休" : "" }}
            </div>
          </div>

          <div class="wrap" v-if="dealMyDate(data.day)"></div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

css代码 ↓
（给原先的格子设置成为背景色为浅绿色；同级放一个类名为wrap的容器，设置定位后会将日历中的字掩盖，所以给日历中的小字容器都设置定位及z-index）

<style lang="scss" scoped>
// 日历内容部分
.cell-container {
  height: 100%;
  width: 100%;

  position: relative;
}
.word-container {
  height: 100%;
  font-size: 12px;
  .date {
    font-size: 16px;
    z-index: 4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
  }
  .solar-terms {
    z-index: 4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
  }
  .festival {
    position: absolute;
    font-weight: bold;
    margin: 10px 0 0 10px;
    z-index: 4;
  }
  .red-word {
    color: #ff4949;
    position: absolute;
    z-index: 4;
  }
}

>>> .el-calendar-day {
  margin: 4px;
  padding: 0;
  border-radius: 8px;
  background: rgba(202, 249, 240, 0.4);
}

// 日历样式
>>> .el-calendar__header .el-calendar__title {
  position: absolute;
}

>>> .el-calendar__button-group {
  width: 100%;
}

>>> .el-button-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

>>> .el-button-group > .el-button:first-child:before {
  content: "<";
}

>>> .el-button-group > .el-button:last-child:before {
  content: ">";
}

>>> .el-button-group > .el-button:first-child span,
>>> .el-button-group > .el-button:last-child span {
  display: none;
}

>>> .el-button {
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}

>>> .el-calendar-table td {
  border: 0;
}
>>> .el-calendar-table tr td:first-child {
  border: 0;
}
>>> .el-calendar-table tr:first-child td {
  border: 0;
}
>>> .el-calendar-table td.is-selected {
  background: transparent;
}
>>> .el-calendar-table td.is-today {
  font-weight: bold;
}
// 不能预约的遮罩层
.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(253, 227, 228, 0.8);
  border-radius: 8px;
}
</style>

里面用到了一个公立转农历的js文件，从这里取
https://github.com/jjonline/calendar.js

头一行引入是我们项目中需要用到的接口，为了取数据用的。刚开始我用的是自己写的假json，不过就是妹有办法实时修改数据，用接口的话，可以实时更改日期里的数据。
有一个方法是做出了一些改动，页面中的一个是我自己后面加的，还有calendar文件中也新添了一个方法。后面会贴出

calendar.js是我搜索后找到的比较需要的阴历阳历什么的js文件，引入即可使用。如果在项目中只用一次的话就放它隔壁就好。如果总是使用，就放静态资源文件夹中，在main.js中引入，就可以全局使用啦

script 代码 ↓

<script>
import { getOrderDate, updateWorkdate } from "@/api/orderAPI";
import calendar from "./canlendar";

export default {
  data() {
    return {
      currentDay: new Date(),
      currentDateList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 获取数据的方法
    init() {
      getOrderDate().then((res) => {
        this.currentDateList = res.content;
      });
    },
    // 过滤出背景色为粉色的数据方法
    dealMyDate(value) {
      if (this.currentDateList.length > 0) {
        let flag;
        let disabledArr = [];

        this.currentDateList.map((item) => {
          if (item.isDeleted === "1" && item.modalType === "1") {
            disabledArr.push({
              date: item.workDate,
              hasRecord: true,
            });
          }
        });

        for (let i = 0; i < disabledArr.length; i++) {
          if (disabledArr[i].date === value) {
            flag = disabledArr[i].hasRecord;
            break;
          }
        }

        return flag;
      }
    },
    // 点击日历格子的方法
    chooseDay(data) {
      // 如果点击的格子为当月的话我们就进行数据转换，如果不是当月就让它去那个 
      // 月
      if (data.type === "current-month") {
        updateWorkdate({
          workDate: data.day,
          modalType: "1",
        })
          .then((res) => {
            if (res.data.code === 200 && res.data.success) {
              this.$message.success("操作成功");
              this.init();
            } else {
              this.$message(res.data.message);
            }
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    // 公立转农历
    // 这个方法原本是网上抄来的，不过我的需求不大一样，所以做了一点小小的改动
    solarToLunar(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );
      // 这个lunarDay里有很多东西，后面会贴图

      // 农历日期
      let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;

      // 公历节日\农历节日\农历节气
      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 == "" ? lunarMD : festAndTerm;
    },
    isFestival(slotDate, slotData) {
      // slotDate是标准时间
      // slotData是对象
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[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("");
      // 原本的方法，return出的是一个Boolean
      // 更改过后返回Object：公立日期、农历日期
      return {
        solarDate: lunarDay.date,
        lunarDate: lunarDay.lunarDate
      };
    },
    // 这个方法是我自己后面添加的，判断是否是公休日。在calendar的文件中也做了 
    // 一丢丢改动
    // 元旦1天、春假3天、清明节1天、端午节1天、五一劳动节1天、中秋节1天、国          
    // 庆节3天
    isVacation(date, data) {
      let obj = this.isFestival(date, data);

      let valSolar = obj.solarDate.slice(5) ;
      let valLunar = obj.lunarDate.slice(5) ;

      let solar = calendar.isSolarPublicHoliday(valSolar);
      let lunar = calendar.isLunarPublicHoliday(valLunar);

      if(solar || lunar) 
        return true;
      return false;
    },
  },
};
</script>

lunarDay的内容。其中festival是节日，lunarFestival是农历节日

?

calendar.js文件中我自己新加的方法 ↓

    /**
     * @param {String} date 
     * @returns {Boolean} 
     */
    isSolarPublicHoliday: function(date) {
        // 阳历：元旦、劳动节、国庆
        let solarArr = ["1-1","5-1","10-1","10-2","10-3"];
        return solarArr.indexOf(date) != -1;
    },
    isLunarPublicHoliday: function(date) {
        // 阴历：春节、清明、端午节、中秋节
        let lunarArr = ["1-1","1-2","1-3","2-23","5-5","8-15"];
        return lunarArr.indexOf(date) != -1;
    }

?

<el-calendar v-model="valueData">
                          <template
                                 slot="dateCell"
                                 slot-scope="{data}">
                                  <!--自定义内容-->
                                    <div>
                                       <div class="calendar-day" >{{ data.day.split('-').slice(2).join('-') }}</div>
                                    </div>
                                </template>
                        </el-calendar>

?inputKs:"",
?inputJs:"",
?valueData: new Date(),

  watch: {
              valueData: function() {
                  var year = this.valueData.getFullYear();
                  var month = this.valueData.getMonth() + 1;
                  var date=this.valueData.getDate()
                  if (date >= 1 && date <= 9) {//日如果小于10就补个0
                      date = "0" + date;
                  }
                  if (month >= 1 && month <= 9) {//月如果小于10就补个0
                      month = "0" + month;
                  }
                  console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
                  var temp = year + '-' + month + '-' + date;
                  this.getCalendarList(temp)   //  调用接口，把拼接好的参数传到后台
              }
          },

getCalendarList(temp){
        console.log('点击日期控件');
        console.log(temp);
        this.inputKs = temp + '  00:00:00';
        this.inputJs = temp + '  23:59:59';
     },

 ::v-deep  .el-calendar__header {
   padding: 0px;
 }

  ::v-deep .el-calendar__button-group {
    width: 100%;
  }

  ::v-deep .el-button-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  ::v-deep .el-button-group > .el-button:first-child:before {
    content: "<";
  }

  ::v-deep .el-button-group > .el-button:last-child:before {
    content: ">";
  }

  ::v-deep .el-button-group > .el-button:first-child span,
  ::v-deep .el-button-group > .el-button:last-child span {
    display: none;
  }

  ::v-deep .el-button {
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  ::v-deep .el-calendar-table thead>th{
    color: #00928C;
    border-bottom: 1px solid #00928C;
  }

  ::v-deep .el-calendar-table td.is-selected {
    // background: transparent;
    color: #00928C;
    font-weight: 500;
  }

  ::v-deep .el-calendar-table td.is-today {
    font-weight: 500;
  }

  ::v-deep .el-calendar__body {
      padding: 0px 6px 0px;
  }

  ::v-deep .el-calendar-table .el-calendar-day{
      width: 33px;
      height: 30px;
    }
 ::v-deep .el-calendar__title{
   display: none;
 }