写一个日历并可以修改日历内容

效果图如下

解释说明: 主要用到了 

• npm包： npm i js-calendar-converter
• 地址详情 https://github.com/jjonline/calendar.js
• 我的休息日是根据接口的字段去判断,接口返回了当年的是否休息字段数据 isWorkday
• 将接口替换,其余粘贴复制即可使用 

代码

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

          <div class="wrap" v-if="dealMyDate(data.day)"></div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>
<script>
import { getList,updateWorkDayStatus } from '@/api/bsp/common/calendar'
// import { getList, updateWorkdate } from "@/api/orderAPI";
import calendar from 'js-calendar-converter'

export default {
  data() {
    return {
      currentDay: new Date(),
      currentDateList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    findWorkDay(data) {
      // 将"2024-11-30"日期处理成"20241130",方便后续寻找
      let [year, month, day] = data.day.split('-');
      let newDateStr = `${year}${month}${day}`;
      const findDay = this.currentDateList.find(item => {
        return item.solarDate === newDateStr
      })
      if (findDay) { // isWorkday为'0' 为非工作日 '1' 为工作日
        return findDay.isWorkday === '0';
      } else {
        return false
      }
    },
    // 获取数据的方法
    init() {
      getList(this.$route.query.solarDate).then((res) => {
        this.currentDateList = res.data
      });
    },
    // 过滤出背景色为粉色的数据方法
    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") {
        // 将"2024-11-30"日期处理成"20241130",方便后续寻找
        let [year, month, day] = data.day.split('-');
        let newDateStr = `${year}${month}${day}`;
        const findDay = this.currentDateList.find(item => {
          return item.solarDate === newDateStr
        })
        // 如果没有则表示不是当前年份
        if (!findDay) {
          this.$message.info('只能设置当前年份的信息!')
          return
        }
        this.$confirm(`是否修改为${findDay.isWorkday === '0'? '工作日': '休息日'}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateWorkDayStatus({
            dayList: newDateStr,
            status: findDay.isWorkday === '0' ? '1' : '0',
          })
            .then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
                this.init();
              } else {
                this.$message(res.data.message);
              }
            })
            .catch((err) => {
              console.error(err);
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      }
    },
    // 公立转农历
    solarToLunar(slotDate, slotData) {
      let solarDayArr = slotData.day.split("-");
      let lunarDay = calendar.solar2lunar(
        solarDayArr[0],
        solarDayArr[1],
        solarDayArr[2]
      );
      // 农历日期
      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
      };
    },
    // 这个方法可以自己写一点判断是否是公休的
    // 元旦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(valSolar || valLunar)
       // return true;
    //  return false;
   // },
  },
};
</script>
<style lang="less" scoped>
.green-background {
  background: rgba(202, 249, 240, 0.4);
}
.red-background {
  background: rgba(241, 208, 208, 0.4);
}
// 日历内容部分
.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;
  }
}

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

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

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

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

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

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

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

/deep/ .el-button {
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}
/deep/.el-calendar-table thead th {
  text-align: center;
}
/deep/ .el-calendar-table td {
  border: 0;
}
/deep/ .el-calendar-table tr td:first-child {
  border: 0;
}
/deep/ .el-calendar-table tr:first-child td {
  border: 0;
}
/deep/ .el-calendar-table td.is-selected {
  background: transparent;
}
/deep/ .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>