vue日历组件vue-calendar-component的使用介绍

vue-calendar-component的GitHub介绍
使用效果：根据开始时间和结束时间，查询出当前时间前6个月的签到详情，日历控件中只能切换6个月的日历情况
效果图：

核心代码：

<template>
   <div class="calendar">
     <Calendar ref="Calendar" :markDate="markDate" @choseDay="clickDay" :agoDayHide="today" @changeMonth="changeMonth">Calendar>
   div>
template>

<script>
import Calendar from '@/components/calendar/calendar.vue'
  export default {
     
    data() {
     
      return {
     
        markDate: [],
        signinList: [], // 签到日期列表
        today: Date.parse(new Date()).toString(),
        isSign: false,
      }
    },
    components: {
     
      Calendar
    },
    created() {
     
      this.queryIsSignIn();
      this.getSignIn()
    },
    methods: {
     
      getSignIn() {
      // 签到日历查询
        var that = this;
        var year = new Date().getFullYear()
        // var month = (new Date().getMonth() + 1) > 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)
        var month = new Date().getMonth() + 1
        if (month < 6) {
     
          month = (month + 7) > 10 ? (month + 7) : '0' + (month + 7)
          year = year - 1
        } else {
     
          month = (month - 5) > 10 ? (month - 5) : '0' + (month - 5)
        }
        var params = {
     
          studentid: that.$utils.CONFIG.user.data.student.id,
          starttime: year + '-' + month + '-01',
          endtime: that.$utils.moment(new Date()).format('YYYY-MM-DD'),
        }
        that.$utils.getJson(that.$utils.CONFIG.api.getSignIn, function (res) {
     
          if (res.succflag === 0) {
     
            that.signinList = res.data
            that.signinList.forEach(item => {
     
              that.markDate.push(that.$utils.moment(item.time).format('YYYY/MM/DD'))
            })
          }
        }, function () {
     }, params, false, {
     token: that.$utils.CONFIG.user.token});
      },
      clickDay (date) {
     
        console.log(date)
      },
      changeMonth (date) {
      // 已签到时日历
        var month = parseInt(date.split('/')[1])
        var year = new Date().getFullYear()
        var currentMoth = (new Date()).getMonth() + 1
        if (month === (currentMoth - 6) && currentMoth < 6) {
     
          currentMoth = (currentMoth + 7) > 10 ? (currentMoth + 7) : '0' + (currentMoth + 7)
          year = year - 1
          this.$refs.Calendar.ChoseMonth((year + '-' + currentMoth + '-01'), false)
        } else if (month === (currentMoth - 6) && currentMoth >= 6) {
     
          currentMoth = (currentMoth - 5) > 10 ? (currentMoth - 5) : '0' + (currentMoth - 5)
          this.$refs.Calendar.ChoseMonth((year + '-' + currentMoth + '-01'), false)
        } else if (month > currentMoth) {
     
          this.$refs.Calendar.ChoseMonth(this.$utils.moment(new Date()).format('YYYY-MM-DD'), false)
        }
      },
    }
  }
</script>