VUE获取节日(中国节+国际节)

现在网上的开源节日基本都是做的节假日相关，本文为单纯的获取节日信息提供一个思路。

先上效果图：

首先，节日分为两部分：中国节和国际节，因为要分阳历和阴历，所以问题点就在这里。
转载 https://github.com/linfan123/vue-rili/blob/master/src/views/calendar/calendar.js 感谢大佬的开源阴阳历转化，另外自定义节日的思路也是源自这个项目。

导入

import calendar from "../../calendar.js";

画面

   <el-dialog>
        <el-table :header-cell-style="{ background: '#dcdfe6', color: '#606266' }" :data="this.recentHoliday">
            <el-table-column prop="holiday" label="日期" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column
                prop="holidayName"
                label="节日"
                width="330"
                show-overflow-tooltip
            ></el-table-column>
        </el-table>
    </el-dialog>

节日有很多，我选择需要表示的节日做成对象数组放进初始数据中，这里还可以修改节日而灵活变更节日信息。

data() {
    return {
    	// 未来三个月的节日
        recentHolidayList: [],
        recentHoliday: [],
        // 公历节日
        gregorianFestival: [
            { holiday: "1-1", holidayName: "元旦" },
            { holiday: "2-14", holidayName: "情人节" },
            { holiday: "3-8", holidayName: "妇女节" },
            { holiday: "3-12", holidayName: "植树节" },
            { holiday: "5-1", holidayName: "劳动节" },
            { holiday: "5-4", holidayName: "青年节" },
            { holiday: "6-1", holidayName: "儿童节" },
            { holiday: "7-1", holidayName: "建党节" },
            { holiday: "8-1", holidayName: "建军节" },
            { holiday: "9-10", holidayName: "教师节" },
            { holiday: "10-1", holidayName: "国庆节" },
            { holiday: "10-31", holidayName: "万圣节" },
            { holiday: "11-26", holidayName: "感恩节" },
            { holiday: "12-25", holidayName: "圣诞节" }
        ],
        // 农历节日
        lunarFestival: [
            { holiday: "1-1", holidayName: "春节" },
            { holiday: "1-15", holidayName: "元宵节" },
            { holiday: "4-4", holidayName: "寒食节" },
            { holiday: "4-5", holidayName: "清明节" },
            { holiday: "5-5", holidayName: "端午节" },
            { holiday: "7-7", holidayName: "七夕节" },
            { holiday: "7-15", holidayName: "中元节" },
            { holiday: "8-15", holidayName: "中秋节" },
            { holiday: "9-9", holidayName: "重阳节" },
            { holiday: "12-30", holidayName: "除夕" }
        ],
	}	

方法。
获取未来三个月的每个日期(阴历和阳历)后与节日数组进行对比，获取筛选出的结果，这里要注意
1.筛选的阴历节日在显示时要再转化为阳历
2.跨年问题，注意跨年后年份+1，月份不要写成13，14
3.节日排序，对象数组的排序，不是很难

// 获取节日信息
    getFestivalInfo() {
        let lunarInfo = [];
        let gregorianInfo = [];
        let nowDate = new Date();
        let year = nowDate.getFullYear();
        let month = nowDate.getMonth() + 1;
        let day = nowDate.getDate();
        // 未来三个月的月
        let mList = [
            month,
            month + 1 < 13 ? month + 1 : month - 11,
            month + 2 < 13 ? month + 2 : month - 10
        ];
        if (day != 1) {
            mList.push(month < 10 ? month + 3 : month - 9);
        }
        // 未来三个月的日
        mList.forEach(m => {
            let dayCount = 30;
            // 进入下一年的日历
            if (mList.includes(1) && mList.includes(12) && m < 4) {
                dayCount = new Date(year + 1, m, 0).getDate();
            } else {
                dayCount = new Date(year, m, 0).getDate();
            }
            let dList = [];
            if (mList.length == 4) {
                if (m == month) {
                    for (let i = day; i < dayCount + 1; i++) {
                        dList.push(i);
                    }
                } else if (m == mList[3]) {
                    for (let i = 1; i < day + 1; i++) {
                        dList.push(i);
                    }
                } else {
                    for (let i = 1; i < dayCount + 1; i++) {
                        dList.push(i);
                    }
                }
            } else {
                for (let i = 1; i < dayCount + 1; i++) {
                    dList.push(i);
                }
            }
            dList.forEach(d => {
                // 进入下一年的日历
                if (mList.includes(1) && mList.includes(12) && m < 4) {
                    lunarInfo.push(calendar.solar2lunar(year + 1, m, d));
                    gregorianInfo.push(year + 1 + "-" + m + "-" + d);
                } else {
                    lunarInfo.push(calendar.solar2lunar(year, m, d));
                    gregorianInfo.push(year + "-" + m + "-" + d);
                }
            });
        });
        this.lunarFestival.forEach(l => {
            lunarInfo.forEach(e => {
                if (e.lMonth + "-" + e.lDay == l.holiday) {
                    this.recentHolidayList.push({
                        holiday: e.cYear + "-" + e.cMonth + "-" + e.cDay,
                        holidayName: l.holidayName
                    });
                }
            });
        });
        this.gregorianFestival.forEach(g => {
            gregorianInfo.forEach(e => {
                if (e.substring(5) == g.holiday) {
                    this.recentHolidayList.push({
                        holiday: e,
                        holidayName: g.holidayName
                    });
                }
            });
        });
        // 节日排序
        this.recentHoliday = this.sortByKey(
            this.recentHolidayList,
            "holiday"
        );
        this.recentHoliday.forEach((e, index) => {
            let tempList = e.holiday.split("-");
            this.recentHoliday[index].holiday =
                tempList[0] +
                "年" +
                tempList[1] +
                "月" +
                tempList[2] +
                "日";
        });
    },
    // 数组对象排序
    sortByKey(array, key) {
        return array.sort(function(a, b) {
            var xYear = a[key].split("-")[0];
            var yYear = b[key].split("-")[0];
            var xMonth = a[key].split("-")[1];
            var yMonth = b[key].split("-")[1];
            var xDay = a[key].split("-")[2];
            var yDay = b[key].split("-")[2];
            if (xYear != yYear) {
                return xYear < yYear ? -1 : xYear > yYear ? 1 : 0;
            } else {
                if (xMonth != yMonth) {
                    return xMonth < yMonth ? -1 : xMonth > yMonth ? 1 : 0;
                } else {
                    return xDay < yDay ? -1 : xDay > yDay ? 1 : 0;
                }
            }
        });
    },

调用

	mounted() {
		this.getFestivalInfo();
	}