前端 vue 制作日历（二）

先上个图

此方法是把一个月的数据转换成二维数组
建立在之前的方式上

完整代码

<template>
  <div id="calendar">
    <div class="calendar_header">
      <p style="width:33%" @click="monthtoleft"> 《 </p>
      <p style="width:34%;text-align:center">
        <span>{{thisyear}}</span>-
        <span>{{thismonth&lt;=9?'0'+thismonth:thismonth}}</span>-
        <span>{{today&lt;=9?'0'+today:today}}</span> <br>
        <span>星期{{week[weekday]}}</span>
      </p>
      <p style="width:33%;text-align:right" @click="monthtoright">》</p>

    </div>
    <hr>
    <div class="calendar-week">
      <div class="calendar-week-day" v-for="(item,index) in week" :key="index"><span
          :class="{weektoday:index==weekday}">{{item}}</span></div>
    </div>
    <div class="calendar-week" v-for="(item,index) in daylist" :key="index">
      <div class="calendar-week-day" v-for="(item2,index2) in item" :key="index2"
        :class="{fontcolor:item2.ismonth==0,check:thisyear==year&&thismonth==month&&item2.day==today&&item2.ismonth==1}"
        @click="checkday(item2.day,item2.ismonth)">{{item2.day}}
      </div>
    </div>
  </div>
</template>

<script>
const myDate = new Date();
export default {
  data () {
    return {
      week: ['日', '一', '二', '三', '四', '五', '六'],
      daylist: [],
      thisyear: '',
      thismonth: '',
      today: '',
      weekday: '',
      year: '',
      month: '',
    };
  },
  created () {
    //初始化年月日星期
    this.year = this.thisyear = myDate.getFullYear()
    this.month = this.thismonth = myDate.getMonth() + 1
    this.today = myDate.getDate()
    this.weekday = myDate.getDay()
    this.getcalendar()
  },
  methods: {
    getcalendar () {
      let daysnumber = new Date(this.thisyear, this.thismonth, 0).getDate();//获取当月天数
      let beginweeks = new Date(this.thisyear, this.thismonth - 1, 1).getDay();//获取当月1日是星期几，确定1日开始位置
      let list = []
      let newList = []
      let mos = ''
      // 获取上个月的天数
      if (this.thismonth == 1) {
        mos = new Date(this.thisyear, 11, 0).getDate()
      } else {
        mos = new Date(this.thisyear, this.thismonth - 1, 0).getDate()
      }
      //补全当前月之前空缺位置
      for (var i = beginweeks; i > 0; i--) {
        let arr = {
          day: mos--,
          ismonth: '0'
        }
        list.push(arr)
      }
      newList = list.reverse()

      for (var j = 1; j <= daysnumber; j++) {
        let arr = {
          day: j,
          ismonth: '1'
        }
        newList.push(arr)
      }
      let endweeks = new Date(this.thisyear, this.thismonth - 1, daysnumber).getDay();//获取当月最后一天是星期几
      //补全每月结束之后空缺位置
      for (var m = 1; m < 7 - endweeks; m++) {
        let arr = {
          day: m,
          ismonth: '0'
        }
        newList.push(arr)
      }
      // 转变一下
      let arrr = []
      this.daylist = newList.reduce(function (pre, item, index, arr) {
        var begin = index * 7;
        var end = begin + 7;
        var res = arr.slice(begin, end);
        if (res.length != 0) {
          arrr[index] = res;
        }
        return arrr;
      }, [])
    },
    //上一月
    monthtoleft () {
      if (this.thismonth > 1) {
        this.thismonth = this.thismonth - 1
      } else {
        this.thismonth = 12
        this.thisyear = this.thisyear - 1
      }
      this.getcalendar()
    },
    //下一月
    monthtoright () {
      if (this.thismonth < 12) {
        this.thismonth = this.thismonth + 1
      } else {
        this.thismonth = 1
        this.thisyear = this.thisyear + 1
      }
      this.getcalendar()
    },
    //获取点击日期
    checkday (days, ismonth) {
      if (ismonth == 1) {
        this.year = this.thisyear
        this.month = this.thismonth
        this.today = days
        this.weekday = new Date(this.thisyear, this.thismonth - 1, days).getDay()
      }
    },
  }

};
</script>
<style scoped lang="scss">
#calendar {
  background: white;
  padding: 10px;
  border: 1px solid #eaebed;
  max-height: 503px;
  .calendar_header {
    height: 67px;
    width: 100%;
    color: #5e7a88;
    display: flex;
  }
  hr {
    background: #eaebed;
    height: 1px;
    border: none;
    margin: 0;
    margin-left: -10px;
  }
  .calendar-week {
    line-height: 58px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 1px;
    display: flex;
    .calendar-week-day {
      width: 15%;
      height: 58px;
      background-color: #eef7fe;
      margin-right: 1px;
      border-radius: 4px;
    }
    .weektoday {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: #ffb400;
      line-height: 30px;
      border-radius: 15px;
      color: white;
    }
    .fontcolor {
      color: #ccc;
      cursor: not-allowed;
      display: inline-block;
    }
    .check {
      background: #95cffd;
    }
  }
}
</style>