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

最新推荐文章于 2024-08-09 07:46:44 发布

前端开心果

最新推荐文章于 2024-08-09 07:46:44 发布

阅读量6.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_38157825/article/details/107337894

版权

vue 专栏收录该内容

116 篇文章 11 订阅

订阅专栏

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>