轻量级Vue日历组件vue-quick-calendar的具体使用场景

---

前言

碰到个有关日历的需求，于是就找到轻量级的Vue日历组件vue-quick-calendar，使用也简单
功能：保存用户选取的日期
考虑到不确定用户可能会选择多少的日期，然后一并保存提交，导致存库数据太多不好查询
于是做成按每个月保存数据，方便存储和查询

---

一、安装和引入

安装

//npm安装
npm install vue-quick-calendar

引入

<script>
  import vueQuickCalendar from 'vue-quick-calendar'
  export default {
    components: { vueQuickCalendar }
  }
</script>

Calendar Events

事件名	说明	参数
clickDate	点击日期	date, item
changeMonth	切换月份	date

组件更多的内置属性见文档 vue-quick-calendar

二、简单使用

简单使用，部分代码

  <vue-quick-calendar 
    showPrepNext 
    weekColor="none" 
    :markDate="markDate" 
    :checkedDate="nowDay" 
    @clickDate="clickDate" 
    @changeMonth="changeMonth" />

  data() {
  	return {
       clickDefin: true,
       markDate: [], //需要标记的日期数组
       markMonth: '2022-04',
       nowDay: '2022-04-16',     
     };
   },
   methods: {
     // 点击日期
     clickDate(date) {
       console.log(date)	// 2022-4-7
     },
     // 切换月份
     changeMonth(date) {
       console.log(date)	// 2022-4
     }
   }

三.具体业务使用

全部代码

<template>
  <!-- 日历 -->
  <div class="main">
    <div>
      <div>点击按钮后，日历中选择日期设置</div>
      <div>
        <el-button size="medium" @click="btnClick" type="primary">{{clickDefin ? '选择日期' : '确定'}}</el-button>
      </div>
    </div>
    <div :class="['bottom-calendar', clickDefin ? 'disableHover' : '']">
      <vue-quick-calendar 
      	showPrepNext 
      	weekColor="none" 
      	:markDate="markDate" 
      	:checkedDate="nowDay" 
      	@clickDate="clickDate" 
      	@changeMonth="changeMonth" />
    </div>
  </div>
</template>

<script>
import vueQuickCalendar from 'vue-quick-calendar'

export default {
  data() {
    return {
      clickDefin: true,
      markDate: [], //需要标记的日期数组
      markMonth: this.timeFormate(new Date())[1],
      nowDay: this.timeFormate(new Date())[0],
    };
  },
  components: { vueQuickCalendar },
  methods: {
    // 点击日期
    clickDate(date) {
      if (this.clickDefin) return
      let tempData = this.timeFormate(date)[0]
      if (this.timeComparison(this.nowDay, tempData)) {
        let index = this.markDate.indexOf(tempData)
        if (index == -1) {
          this.markDate.push(tempData)
        } else {
          this.markDate.splice(index, 1)
        }
      } else {
        this.$message({ message: '不能选择之前的日期！', type: 'warning' })
      }
    },
    // 切换月份
    changeMonth(date) {
      this.markMonth = this.timeFormate(date)[1]
      let nowTempDay = this.timeFormate(date)[0]
      if (!this.clickDefin) {
        this.saveMark()
      }
      this.getMark(nowTempDay)
    },
    // 获取当前月份的所有被选中日期
    getMark(date) {
      // monList({declareDate: date}).then( res => {
      //   this.markDate = res.data
      // })
      // 取后端保存的当月数据
      this.markDate = []
    },
    btnClick() {
      if (!this.clickDefin) {
        this.$confirm('您确定提交这些日期吗？', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.clickDefin = true
          this.saveMark()
        })
      } else {
        this.clickDefin = !this.clickDefin
      }
    },
    // 修改日历 保存数据
    saveMark() {
      // 调接口保存当月数据
      // calendarSave({monList: this.markDate, declareDate: this.markMonth}).then( () => {})
      console.log(this.markDate, this.markMonth);
    },
    // 时间格式化
    timeFormate(tempTime) {
      let day2 = new Date(tempTime)
      let Y = day2.getFullYear()
      Y = Y < 10 ? '0' + Y : Y
      let M = day2.getMonth() + 1
      M = M < 10 ? '0' + M : M
      let D = day2.getDate()
      D = D < 10 ? '0' + D : D
      let h = day2.getHours()
      h = h < 10 ? '0' + h : h
      let i = day2.getMinutes()
      i = i < 10 ? '0' + i : i
      let s = day2.getSeconds()
      s = s < 10 ? '0' + s : s
      let w = day2.getDay()
      let s1 = Y + "-" + M + "-" + D
      let s2 = Y + "-" + M
      let s3 = h + ":" + i
      return [s1, s2, s3, w]
    },
    //比较时间
    timeComparison(begintime, endtime) {
      let startTime = new Date(begintime).getTime()
      let endTime = new Date(endtime).getTime()
      return endTime > startTime
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  position: relative;
  .bottom-calendar {
    position: relative;
    // width: 90%;
    margin: 10px auto;
    background-color: #fff;
    // 样式穿透用 >>> 或 /deep/ 或 ::v-deep
    >>> .pc-vue-quick-calendar {
      // border: none;
      header {
        padding: 30px 0 20px 0;
        border: none;
        h1 {
          font-size: 18px;
        }
      }
      .dates {
        padding: 0 10% 30px 10%;
        font-size: 18px !important;
        justify-content: space-around;
      }
      .day {
        color: #909090;
      }
      .day:hover {
        background: #9aeaf9;
      }
      ul li::after {
        width: 0;
        height: 0;
      }
      ul li.weeks,
      ul li.day {
        font-size: inherit;
        height: 35px !important;
        width: 10% !important;
        margin: 6px 1.6%;
      }
      .isSelected {
        background: inherit;
      }
      li.day.isWeekend {
        cursor: pointer;
        opacity: 1;
      }
      li.day.isPrep,
      li.day.isNext {
        opacity: 0.3;
        cursor: pointer;
      }
      li.day.isMarked {
        color: #fff;
        background: #1890ff;
      }
      li.day.isMarked::after {
        background: inherit;
      }
    }
  }
  .bottom-calendar.disableHover {
    >>> .pc-vue-quick-calendar {
      li.day:hover,
      li.weeks:hover {
        background-color: inherit;
        cursor: default;
      }
      li.day.isMarked:hover {
        color: #fff;
        background: #1890ff;
      }
    }
  }
}
</style>

效果图