实现简易日历

页面代码

<div class="f2">
        <div class="ititle">
          <div class="im" @click="plusMonth()">
            <img src="static/images/icon/sileft.png"/>
          </div>
          <div class="title">{{nowMonth}}</div>
          <div class="im1" @click="addMonth()">
            <img src="static/images/icon/siright.png"/>
          </div>
        </div>
        <div class="week">
          <div class="weeekRes">
            <div class="weekResT1" v-for="(item,index) in days" :key="index">
              <div class="weekResti1"><span>{{item.week}}</span></div>
            </div>
            <div class="weekResT2" v-for="(item,index) in list" :key="index">
              <div :class="['orderYuan']">
                <span :class="['orderYuanTT',{'cirTT':item.sign},{'y':!item.inMonth}]">{{item.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div>

js代码
通过moment库的一些事件方法实现，首先获取到今天是周几，然后通过这个周几来算出这个月的日历要显示上个月的几天，最后通过add方法，把这个月的天数和下个月的天数补齐即可，

  getCal() {
        let monthOffset = this.monthOffset
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY-MM') + '-01'
        //当前选择的年月（获取到1号）
        let list = []
        //算出周几
        let vWeekOfDay = moment(nowMonth).format('E') //算出这周的周几
        if (vWeekOfDay == 7) {
          vWeekOfDay = 0
        }
        //获取这个月的日历需要补满上个月的几天
        let left = vWeekOfDay
        for (let i = vWeekOfDay; i > 0; i--) {
          //10-1往前减
          let xdate = moment(nowMonth).subtract(i, 'days')
          console.log(xdate)
          let xname = xdate.format('D')
          console.log(xname)
          list.push({
            name: xname,
            date: xdate.format('YYYY-MM-DD'), sign: false
          })
        }
        if (this.exceed) {
          //遍历出一个月的日历显示的总天数减去上个月需要显示的天数剩余的所有天数
          //比如这个月的日历需要显示5天上个月的日子，
          //那就用42减去5.得到剩下要显示的天数，
          //剩下37，也就是说除了这个月的30天之外，
          //还会额外显示下个月的7天，
           //add方法返回的就是从这个moment(nowMonth)开始，
         //后面的第i天的号数，比如返回的是15，意思就是下个月的15号，
          for (let i = 0; i < 42 - vWeekOfDay; i++) {
            let xdate = moment(nowMonth).add(i, 'days')
            let xname = xdate.format('D')
            list.push({
              name: xname,
              date: xdate.format('YYYY-MM-DD'),
              sign: false
            })
          }
        } else {
          //7-少了几个
          for (let i = 0; i < 7 - vWeekOfDay; i++) {
            let xdate = moment(nowMonth).add(i, 'days')
            let xname = xdate.format('D')
            list.push({
              name: xname,
              date: xdate.format('YYYY-MM-DD'),
              sign: false
            })
          }
        }
        this.list = list
        let that = this
        this.list.forEach(item => {
          item.inMonth = that.isInMoth(item.date)
        })
        // this.getSigned()
      },
      isInMoth(date) {
        let tmonth = moment(date).format('YYYY年MM月')
        if (tmonth == this.nowMonth) {
          return true
        }
        return false
      },
      plusMonth() {
        let monthOffset = this.monthOffset
        monthOffset = monthOffset - 1
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
        this.monthOffset = monthOffset
        this.nowMonth = nowMonth
        this.getCal()
      },
      addMonth() {
        let monthOffset = this.monthOffset
        monthOffset = monthOffset + 1
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
        this.monthOffset = monthOffset
        this.nowMonth = nowMonth
        this.getCal()
      },
    }


//计算周几
let wk = new Date().getDay() 
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
//getDay方法返回的数字当作下标，就可以得到今天是周几
。。。