js实现日历效果

最近需要实现一个日历功能，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; 
  },

有不明白的朋友可以直接@我