vue移动端实现日历

实现功能：左滑返回上一个月，右滑下一个月，支持农历，下拉展示记录日志，持续更新

 

 

思路：

获取本月日历中的上个月显示日期以及下个月显示日期，通过数组展现

核心代码;

 getCurrentMonVal(year,month){
        month = month - 1
        let getWeekday = calendar.getWeekday(year,month)
        let getPreMonthCount = calendar.getPreMonthCount(year,month)
        let getMonthCount = calendar.getMonthCount(year,month)
        let preMon = []
        let mon = []
        let nextMon = []
        // 获取上个月内容(置灰部分)
        for (let i = getPreMonthCount.length - getWeekday+1; i <= getPreMonthCount.length; i++) {
          let lunarDay = getLunar(calendar.getPreMonth(year,month+1).year, calendar.getPreMonth(year,month+1).month, i)
          let solarFestival = festival.getSolarFestival(calendar.getPreMonth(year,month+1).month, i)
          let lunarFestival = festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate)
          preMon.push({
            solar: i,
            isCurrentMon: false,
            lunarDay: lunarDay,
            solarFestival: solarFestival, // 阳历节日
            lunarFestival: lunarFestival, // 农历节日
            isFestival: solarFestival || lunarFestival || lunarDay.solarTerm,
            agendas: data.agendas[calendar.dateFormater(calendar.getPreMonth(year,month+1).year, calendar.getPreMonth(year,month+1).month, i)]
          })
        }
        // 获取本月数据
        for (let i = 1; i <= getMonthCount.length; i++) {
          let lunarDay = getLunar(year, month+1, i)
          let solarFestival = festival.getSolarFestival(month+1, i)
          let lunarFestival = festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate)
          mon.push({
            solar: i,
            isCurrentMon: true,
            lunarDay: lunarDay,
            solarFestival: festival.getSolarFestival(month+1, i),
            lunarFestival: festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate), // 农历节日
            isFestival: solarFestival || lunarFestival || lunarDay.solarTerm,
            agendas: data.agendas[calendar.dateFormater(year, month+1, i)]
          })
        }
        // 获取下个月数据(置灰部分)
        for (let i = 1; i <= ((getWeekday+getMonthCount.length)<=35?35-getWeekday-getMonthCount.length:42-getWeekday-getMonthCount.length); i++) {
          let lunarDay = getLunar(calendar.getNextMonth(year,month+1).year, calendar.getNextMonth(year,month+1).month, i)
          let solarFestival = festival.getSolarFestival(calendar.getNextMonth(year,month+1).month, i)
          let lunarFestival = festival.getLunarFestival(lunarDay.lunarMonth,lunarDay.lunarDate)
          nextMon.push({
            solar: i,
            isCurrentMon: false,
            lunarDay: lunarDay,
            solarFestival: solarFestival,
            lunarFestival: lunarFestival, // 农历节日
            isFestival: solarFestival || lunarFestival || lunarDay.solarTerm,
            agendas: data.agendas[calendar.dateFormater(calendar.getNextMonth(year,month+1).year, calendar.getNextMonth(year,month+1).month, i)]
          })
        }
        return preMon.concat(mon).concat(nextMon)
      },

 项目地址：https://gitee.com/lhyu/calendar