vue-hash-calendar用法心得

npm i vue-hash-calendar

// 在入口文件中（main.js），导入组件库
import vueHashCalendar from 'vue-hash-calendar'
// 引入组件CSS样式
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
// 注册组件库
Vue.use(vueHashCalendar)

<template>
  <div class="calendar-con">
    <div class="action">
      <img
          class="hdzj_icon"
          src="@/assets/image/hdzj_icon.png"
          alt=""
          srcset=""
          @click="goSolicitation()"
        />
      <div
        class="now"
        :style="{
          'margin-right': '10px',
          'font-size': dateChangeType === 'year' ? '22px' : '18px',
          'font-weight': dateChangeType === 'year' ? '600' : '500'
        }"
        @click="dateTypeChange('year')"
      >
        {{ this.nowYear }}
      </div>
      <div
        class="now"
        :style="{
          'margin-right': '10px',
          'font-size': dateChangeType === 'month' ? '22px' : '18px',
          'font-weight': dateChangeType === 'month' ? '600' : '500'
        }"
        @click="dateTypeChange('month')"
      >
        {{ this.nowMonth }}
      </div>
      <img
        class="arrow-left"
        src="@/assets/image/arrowleft.png"
        @click="deDate"
        alt=""
      />
      <img
        class="arrow"
        src="@/assets/image/arrowright.png"
        @click="addDate"
        alt=""
      />
      <!-- <div slot="today" class="today" @click="backToday">回到今天</div> -->
    </div>
    <div class="min_con">
      <vue-hash-calendar
        :visible="true"
        ref="calendar"
        :defaultDatetime="nowday"
        :isShowWeekView="isShowWeekView"
        :themeColor="themeColor"
        :markType="'circle'"
        :weekStart="'monday'"
        @change="calendarChange"
        :markDate="markList"
        :disabled-week-view="true"
      >
        <div slot="action">
          <!-- <div class="now" :style="{
            'margin-right': '10px',
            'font-size': dateChangeType === 'year' ? '22px' : '18px',
            'font-weight': dateChangeType === 'year' ? '600' : '500'
          }"
          @click="dateTypeChange('year')"
          >{{ this.nowYear }}</div>
        <div class="now" :style="{
            'margin-right': '10px',
            'font-size': dateChangeType === 'month' ? '22px' : '18px',
            'font-weight': dateChangeType === 'month' ? '600' : '500'
          }"
           @click="dateTypeChange('month')"
          >{{ this.nowMonth }}</div>
          <img
        class="arrow-left"
        src="@/assets/image/arrowleft.png"
        @click="deDate"
        alt=""
      />
      <img
        class="arrow"
        src="@/assets/image/arrowright.png"
        @click="addDate"
        alt=""
      /> -->
          <!-- <div slot="today" class="today" @click="backToday">回到今天</div> -->
        </div>
        <b slot="day" slot-scope="scope" class="no-weight">{{
          scope.date.day
        }}</b>
      </vue-hash-calendar>
      <div class="line-turn" @click="isShowWeekView = !isShowWeekView">
        <img
          v-show="isShowWeekView"
          class="arrowSZ"
          src="@/assets/image/zhankai.png"
          alt=""
        />
        <img
          v-show="!isShowWeekView"
          class="arrowSZ"
          src="@/assets/image/shouqi.png"
          alt=""
        />
        <!-- {{isShowWeekView ? '周视图' : '月视图'}} -->
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      dateChangeType: 'month',
      nowYear: '',
      nowMonth: '',
      nowday: new Date(),
      monthCont: 0,
      yearCont: 0,
      isShowWeekView: true, //是否以周视图展示日历组件
      themeColor: {
        'bg-color': '#ffffff',
        'main-color': '#1677ff',
        'main-font-color': '#333333',
        'vice-font-color': '#666666'
      }, //日历主体色
      now: '', //当前月份
      markList: [{ color: '#1677ff', date: ['2024/07/17'] },{ color: '#1677ff', type: 'dot', date: [] }] //有标记的日期
    }
  },
  mounted() {
    this.initDate()
  },
  watch: {
    //月份变换时获取当前月份标记日期
    now: {
      handler(newVal, oldVal) {
        this.getMarkDate(newVal)
      },
      immediate: true
    }
  },
  methods: {
    goSolicitation(){
      this.$router.push({ name: 'solicitation' })
    },
    // handleDayClick(date) {
    //   console.log('date',date);
    //   const event = { date, isToggled: true }; // 创建新的打卡事件
    //   this.events.push(event); // 添加到事件列表中
    // },
    addDate() {
      // if (this.dateSZType) {
      //   return
      // }
      if (this.dateChangeType === 'month') {
        this.adMonth()
      } else if (this.dateChangeType === 'year') {
        this.adYear()
      }
    },
    deDate() {
      // if (this.dateSZType) {
      //   return
      // }
      console.log('aaa')
      if (this.dateChangeType === 'month') {
        this.deMonth()
      } else if (this.dateChangeType === 'year') {
        this.deYear()
      }
    },
    // 当前月上一个月
    deMonth() {
      this.monthCont--
      // this.month = this.month + this.monthCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    // 当前月下一个月
    adMonth() {
      this.monthCont++
      // this.month = this.month + this.monthCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    // 当前年上一个年
    deYear() {
      this.yearCont--
      // this.year = this.year + this.yearCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    // 当前年下一个年
    adYear() {
      this.yearCont++
      // this.year = this.year + this.yearCont
      this.nowday = new Date(
        this.year + this.yearCont,
        this.month + this.monthCont,
        1
      )
    },
    dateTypeChange(val) {
      this.dateChangeType = val
      // this.monthCont = 0
    },
    //获取当前月份标记日期
    getMarkDate(val) {
      this.markList[1].date = ['2022/09/11', '2022/09/12']
      console.log('day', this.markList[0].date)
      //通过修改this.markList[0].date来实现切换月份时获取对应的标记日期，格式为['2022/09/11','2022/09/12']之类
    },
    //回到今天
    backToday() {
      this.$refs.calendar.today()
    },
    //显示当前几月
    initDate() {
      console.log(
        'this.$refs.calendar.checkedDate',
        this.$refs.calendar.checkedDate
      )
      this.now =
        this.$refs.calendar.checkedDate.year +
        '年' +
        (this.$refs.calendar.checkedDate.month + 1) +
        '月'
      this.nowYear = this.$refs.calendar.checkedDate.year + '年'
      this.nowMonth = this.$refs.calendar.checkedDate.month + 1 + '月'
    },
    //日期变换
    calendarChange(date) {
      // console.log('date', date)
      // const event = { date, isToggled: true } // 创建新的打卡事件
      // this.events.push(event) // 添加到事件列表中
      this.initDate()
    }
  }
}
</script>
<style scoped lang="less">
.calendar-con{
  margin-top: 12px;
}
.line-turn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrowSZ {
  width: 18px;
  height: 6px;
}
.action {
  height: 45px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  // background-color: black;
}
.now {
  // font-size: 18px;
  // font-weight: 500;
  color: #ffffff;
}
.arrow {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 8px;
  right: 100px;
  z-index: 2;
}
.arrow-left {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 8px;
  left: 100px;
  z-index: 2;
}
.min_con {
  width: 351px;
  margin: 0 auto 12px auto;
  background-color: #ffffff;
  border-radius: 8px;
  position: relative;
  z-index: 2;
  padding: 12px;
  box-sizing: border-box;
}
.hdzj_icon{
    position: absolute;
    z-index: 3;
    right: 0;
    top: 0;
    width: 85px;
  }
</style>