前端 vue 制作一个日历（一）

由于项目需求，需要做一个日历
先上一个图吧

此方法获取的天数是一个总的天数

全部代码

<template>
  <div id="wfcalendar">
    <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>
    <ul class="wf-week">
      <li v-for="(item,index) in week" :key="index"><span
          :class="{weektoday:index==weekday}">{{item}}</span></li>
    </ul>
    <ul class="wf-days">
      <li v-for="(item,index) in daylist" :key="index" @click="checkday(item.day,item.ismonth)"
        :class='{check:thisyear==year&&thismonth==month&&item.day==today&&item.ismonth==1}'><span
          :class="{fontcolor:item.ismonth==0}">{{item.day}}</span></li>
    </ul>
  </div>
</template>

<script>
const myDate = new Date();
export default {
  data () {
    return {
      week: ['日', '一', '二', '三', '四', '五', '六'],
      daylist: [],
      thisyear: '',
      thismonth: '',
      today: '',
      weekday: '',
      year: '',
      month: '',
      day: '',
      weeks: '',
    };
  },
  created () {
    //初始化年月日星期
    this.year = this.thisyear = myDate.getFullYear()
    this.month = this.thismonth = myDate.getMonth() + 1
    this.day = this.today = myDate.getDate()
    this.weeks = 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 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)
      }
      this.daylist = list.reverse()

      for (var j = 1; j <= daysnumber; j++) {
        let arr = {
          day: j,
          ismonth: '1'
        }
        this.daylist.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'
        }
        this.daylist.push(arr)
      }
    },
    //上一月
    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.day = this.today = days
        this.weeks = this.weekday = new Date(this.thisyear, this.thismonth - 1, days).getDay()
      }
    },
  }

};
</script>
<style scoped>
#wfcalendar {
  background: white;
  padding: 10px;
  /* width: 624px; */
  border: 1px solid #eaebed;
  max-height: 503px;
}

#wfcalendar hr {
  background: #eaebed;
  height: 1px;
  border: none;
  margin: 0;
  /* width: 644px; */
  margin-left: -10px;
}
#wfcalendar .wf-week li {
  width: 14%;
  height: 58px;
  line-height: 58px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 1px;
}
#wfcalendar .wf-week li .weektoday {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #ffb400;
  line-height: 30px;
  border-radius: 15px;
  color: white;
}
#wfcalendar .wf-days li {
  display: inline-block;
  height: 58px;
  width: 14%;
  line-height: 58px;
  margin: 0px auto;
  border-radius: 4px;
  background: #eef7fe;
  text-align: center;
  margin-right: 1px;
  cursor: pointer;
  margin-bottom: 1px;
}
#wfcalendar .wf-days li .fontcolor {
  color: #ccc;
  cursor: not-allowed;
  display: inline-block;
  width: 100%;
  height: 100%;
  /* pointer-events:none; */
}
#wfcalendar .wf-days .check {
  background: #95cffd;
}
#wfcalendar .calendar_header {
  height: 67px;
  width: 100%;
  color: #5e7a88;
  display: flex;
}
#wfcalendar .calendar_header p {
  display: inline-block;
}
#wfcalendar .calendar_header p img {
  width: 26px;
  height: 26px;
  cursor: pointer;
}
#wfcalendar .calendar_header p span {
  display: inline-block;
  cursor: pointer;
  /* width: 100%; */
}
#wfcalendar .calendar_header p span:hover {
  color: #5cb3ff;
}
#wfcalendar .checkyears li {
  display: inline-block;
  width: 25%;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}
#wfcalendar .checkyears .check {
  color: #2176d9;
}
</style>