(壹)博主介绍

🌠个人博客： 尔滨三皮
⌛程序寄语：木秀于林，风必摧之；行高于人，众必非之。

(贰)文章内容

1、安装依赖

npm install moment@2.29.4 --save

npm install lunar@0.0.3 --save

npm install lunar-javascript@1.6.7 --save

2、ChineseFestival.js

在utils文件夹内，新建.js

export const worldHolidays = [
    { month: 1, day: 1, name: '元旦' }, // New Year's Day
    { month: 2, day: 14, name: '情人节' }, // Valentine's Day
    { month: 3, day: 8, name: '妇女节' }, // International Women's Day
    { month: 4, day: 1, name: '愚人节' }, // April Fools' Day
    { month: 4, day: 22, name: '地球日' }, // Earth Day
    { month: 5, day: 1, name: '劳动节' }, // International Workers' Day
    { month: 12, day: 25, name: '圣诞节' }, // Christmas Day
]

3、时间格式转换

utils.js 中添加如下函数

// date原型链对象添加format方法，用于format日期格式
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, // 月份
    "d+": this.getDate(), // 日
    "h+": this.getHours(), // 小时
    "m+": this.getMinutes(), // 分
    "s+": this.getSeconds(), // 秒
    "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
    S: this.getMilliseconds(), // 毫秒
  }

  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length))
    }
  }

  return fmt
}

// Date对象Transfer对象，将时间戳转换成日期对象
Date.Transfer = function (timeSpan) {
  if (!timeSpan) {
    return new FormatDateNullValue()
  }

  return new Date(timeSpan)
}

4、日历组件

<!-- 日历组件 -->
<template>
  <div class="calendarsBox">
    <section>
      <div class="btnBox">
        <el-button @click="preY" size="mini">上一年</el-button> <el-button @click="nexY" size="mini">下一年</el-button>
      </div>

      <el-calendar v-model="value" ref="ec">
        <template #dateCell="{ date, data }">
          <!-- 日历详细 -->
          <div class="conter">
            <div class="c-box">
              <!-- 月日 -->
              <div class="day">
                {{ Date.Transfer(data.day).Format("MM-dd") }}
              </div>
              <!-- 农历 -->
              <div class="date">{{ lunarcalendar1(date) }}</div>
              <!-- 节气 -->
              <div class="jieqi" v-html="solarTerms(getLunarYMD('y', date), getLunarYMD('m', date), getLunarYMD('d', date))"></div>
              <!-- 中国传统节日 -->
              <div class="jieri">{{ funcFestival(+data.day.split("-")[1], +data.day.split("-")[2]) }}</div>
            </div>

            <div>{{ funcTraditionalFestival(getLunarYMD("y", date), getLunarYMD("m", date), getLunarYMD("d", date)) }}</div>
          </div>
        </template>
      </el-calendar>
    </section>
  </div>
</template>

<script>
import moment from "moment"
import lunar from "lunar-javascript"
import { chineseFestival } from "@/utils/chineseFestival"
export default {
  name: "Calendars",
  components: {},
  data() {
    return {
      date: moment(new Date()),
      value: null,
    }
  },
  methods: {
    preY() {
      // month 接受从 0 到 11 的数字。 如果超出范围，它将冒泡到年份。
      this.funcY("-")
    },
    nexY() {
      this.funcY("+")
    },
    funcY(_symbol) {
      let t, y
      if (_symbol === "+") {
        y = this.date.year() + 1
      } else if (_symbol === "-") {
        y = this.date.year() - 1
      }
      t = moment(`${y}-${moment().month() + 1}-${moment().date()}`)
      this.value = this.funcToDate(t)
      this.funcSynchronous(t)
    },
    funcToDate(_moment) {
      return _moment.toDate()
    },
    funcSynchronous(_t) {
      this.date = moment(_t.toDate())
    },
    lunarcalendar(ymd) {
      return lunar.Solar.fromDate(ymd).getLunar().toFullString()
    },
    lunarcalendar1(ymd) {
      return lunar.Solar.fromDate(ymd).getLunar().toString().split("年")[1]
    },
    funcTraditionalFestival(_y, _m, _d) {
      return lunar.Lunar.fromYmd(+_y, +_m, +_d).getFestivals()[0] ? lunar.Lunar.fromYmd(+_y, +_m, +_d).getFestivals()[0] : ""
    },
    funcTraditionalFestival1(_y, _m, _d) {
      return lunar.Lunar.fromYmd(+_y, +_m, +_d).getOtherFestivals()[0] ? lunar.Lunar.fromYmd(+_y, +_m, +_d).getOtherFestivals()[0] : ""
    },
    solarTerms(_y, _m, _d) {
      var d = lunar.Lunar.fromYmd(_y, _m, _d)
      let jq = d.getJieQi()
      return jq
        ? '<span style="font-family: "zkxw"">' +
            jq +
            "</span>" +
            " " +
            d
              .getJieQiTable()
              [jq].toYmdHms()
              .match(/\d\d:\d\d:\d\d/gi)[0]
        : ""
    },
    getLunarYMD(type, t1) {
      let t,
        d1 = lunar.Lunar.fromDate(t1)
      switch (type) {
        case "y":
          t = d1.getYear()
          break
        case "m":
          t = d1.getMonth()
          break
        case "d":
          t = d1.getDay()
          break
        default:
      }
      return t
    },
    funcFestival(m, d) {
      let festival = chineseFestival.find(i => i.month === m && i.day === d)
      return festival ? festival.name : ""
    },
  },
  mounted() {
    this.value = this.funcToDate(this.date)
    console.log(this.$refs.ec)
    console.log(chineseFestival)
  },
}
</script>

<style lang="less" scoped>
/*移动端适配*/
@media screen and (max-width: 1118px) {
  .calendarsBox {
    width: 100%;
    height: 100%;
    font-family: "lgq";
    position: relative;
    font-size: 0.6rem;
    section {
      //上一年 下一年
      .btnBox {
        position: absolute;
        top: .54rem;
        right: 9.8rem;
        .el-button + .el-button {
          margin-left: 0;
        }
      }
    }
    ::v-deep .el-button {
      border: none;
    }
    ::v-deep .el-button:hover {
      color: #409eff;
      border-color: none;
      background-color: #dae6f5;
    }
    ::v-deep .el-calendar-table .el-calendar-day {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    ::v-deep .el-calendar__body {
      padding: 0 0 0;
    }
    ::v-deep .el-calendar-table td.is-today {
      color: #409eff;
    }
    .conter {
      text-align: center;

      .c-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .day {
          width: 100%;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          font-size: 0.52rem;
          font-weight: bold;
          border-radius: 0.1rem;
        }
        .date {
          height: 1rem;
          line-height: 1rem;
          font-size: 0.4rem;
        }
        .jieqi {
          color: blue;
        }
        .jieri {
          color: red;
          font-family: "dyh";
          font-size: .5rem;
        }
      }
    }
  }
}
// PC端适配
@media screen and (min-width: 1119px) {
  .calendarsBox {
    width: 100%;
    height: 100%;
    font-family: "lgq";
    position: relative;
    font-size: 0.3rem;
    section {
      //上一年 下一年
      .btnBox {
        position: absolute;
        top: 0.23rem;
        right: 4rem;
        .el-button + .el-button {
          margin-left: 0;
        }
      }
    }
    ::v-deep .el-button {
      border: none;
    }
    ::v-deep .el-button:hover {
      color: #409eff;
      border-color: none;
      background-color: #dae6f5;
    }
    ::v-deep .el-calendar-table .el-calendar-day {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    ::v-deep .el-calendar__body {
      padding: 0 0 0;
    }
    ::v-deep .el-calendar-table td.is-today {
      color: #409eff;
    }
    .conter {
      text-align: center;

      .c-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .day {
          width: 100%;
          height: 0.6rem;
          line-height: 0.6rem;
          text-align: center;
          font-size: 0.42rem;
          font-weight: bold;
          border-radius: 0.1rem;
        }
        .date {
          height: 0.6rem;
          line-height: 0.6rem;
        }
        .jieqi {
          color: blue;
        }
        .jieri {
          color: red;
          font-family: "dyh";
        }
      }
    }
  }
}
</style>