最近需要实现一个日历功能,el-calendar无法满足需求,需求是查看用户打卡记录,由于服务只返回了一个月的数据并且只有阳历日期,所以我们需要填充农历、农历节日、阳历节日、二十四节气的显示,因为只是一个月数据所以不需要考虑上下月的问题,先看效果(静态代码就不贴了)
其实这个就关键的点就是当月的1号是星期几,搞清楚这个了问题就差不多完成了先看服务返回的数据
// arr就是服务返回的calenderDays数组,这行代码就是获取当月1号是星期几
this.startEmptyNum = new Date(arr[0].day).getDay();
到这里日历的数据就显示出来了,接下来就是节假日数据,农历数据是通过chinese-lunar-calendar插件实现的,其它的直接贴代码
// 通过循环数组,给每一项都增加4个字段
arr.map((el) => {
var ymd = el.day.split("-");
el.lunarCalendar = getLunar(ymd[0], ymd[1], ymd[2]); // 农历
el.lunarHolidays = this.getLunarHolidays(el.lunarCalendar.lunarMonth + '-' + el.lunarCalendar.lunarDate) // 农历节假日
el.GregorianHolidays = this.getGregorianHolidays(ymd[1] + '-' + ymd[2]) // 阳历节假日
el.jq = this.getjq(ymd[0], ymd[1], ymd[2])
})
// 阳历节假日
getGregorianHolidays(str){
let obj = {
'01-01': '元旦节',
'02-14': '情人节',
'03-08': '妇女节',
'03-12': '植树节',
'04-01': '愚人节',
'05-01': '劳动节',
'05-04': '青年节',
'05-12': '护士节',
'06-01': '儿童节',
'07-01': '建党节',
'08-01': '建军节',
'09-10': '教师节',
'10-01': '国庆节',
'12-24': '平安夜',
'12-25': '圣诞节',
}
return obj[str]
},
// 农历节假日
getLunarHolidays(str){
let obj = {
'12-30': '除夕',
'1-1': '春节',
'1-15': '元宵节',
'2-2': '龙抬头',
'5-5': '端午节',
'7-7': '七夕节',
'7-15': '中元节',
'8-15': '中秋节',
'9-9': '重阳节',
'10-1': '寒衣节',
'10-15': '下元节',
'12-8': '腊八节',
'12-23': '北方小年',
'12-24': '南方小年',
}
return obj[str]
},
getjq(yyyy,mm,dd){
mm = mm-1;
var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);
var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");
var solarTerms = "";
// 此方法可以获取该日期处于某节气
var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));
var tmp2 = tmp1.getUTCDate();
if (tmp2==dd) solarTerms = solarTerm[mm*2+1];
tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));
tmp2= tmp1.getUTCDate();
if (tmp2==dd) solarTerms = solarTerm[mm*2];
return solarTerms;
},
有不明白的朋友可以直接@我