VUE获取节日(中国节+国际节)
现在网上的开源节日基本都是做的节假日相关,本文为单纯的获取节日信息提供一个思路。先上效果图:首先,节日分为两部分:中国节和国际节,因为要分阳历和阴历,所以问题点就在这里。转载 https://github.com/linfan123/vue-rili/blob/master/src/views/calendar/calendar.js感谢大佬的开源阴阳历转化,另外自定义节日的思路也是源自这个项目。
·
现在网上的开源节日基本都是做的节假日相关,本文为单纯的获取节日信息提供一个思路。
先上效果图:
首先,节日分为两部分:中国节和国际节,因为要分阳历和阴历,所以问题点就在这里。
转载 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();
}
更多推荐
已为社区贡献1条内容
所有评论(0)