(壹)博主介绍

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

(贰)文章内容

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, yif (_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()breakcase "m":t = d1.getMonth()breakcase "d":t = d1.getDay()breakdefault:}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>