日历组件vue-hash-canlendar的使用

最近开发中需要用到一个类似钉钉考勤日历的功能，能左右滑动和切换周/月，标记指定日期之类的功能，搜了一下找到这个组件，github地址：

mirrors / TangSY / vue-hash-calendar · GitCode


 

安装：

npm i -S 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">
    <vue-hash-calendar
              :visible="true"
              ref="calendar"
              :isShowWeekView="isShowWeekView"
              :themeColor="themeColor"
              :markType="'circle'"
              :weekStart="'monday'"
              @change="calendarChange"
              :markDate="markList"
              :disabled-week-view="true"
            >
              <div
                slot="action"
                class="action"
              >
                <div class="now">{{ now }}</div>
                <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"
            >
              {{isShowWeekView ? '周视图' : '月视图'}}
            </div>
    </div>
<template>
<script>
export default {
    data () {
        return {
            isShowWeekView: true,//是否以周视图展示日历组件
            themeColor: {
                'bg-color': '#ffffff',
                'main-color': '#00A862',
                'main-font-color': '#333333',
                'vice-font-color': '#666666'
            },//日历主体色
            now: '',//当前月份
            markList: [
                { color: '#00A862', date: [] }
            ],//有标记的日期
        }
    },
    mounted () {
        this.initDate()
    },
    watch: {
        //月份变换时获取当前月份标记日期
        'now': {
            handler (newVal, oldVal) {
                this.getMarkDate()
            },
            immediate: true
        }
    },
    methods:{
        //获取当前月份标记日期
        getMarkDate () {
            //通过修改this.markList[0].date来实现切换月份时获取对应的标记日期，格式为['2022/09/11','2022/09/12']之类
        },
        //回到今天
        backToday () {
            this.$refs.calendar.today()
        },
        //显示当前几月
        initDate () {
            this.now = this.$refs.calendar.checkedDate.month + 1 + '月'
        },
        //日期变换
        calendarChange (date) {
            this.initDate()
        },
    }
}
</script>

用到了两个slot，一个是回到今天，action套today，一个是每一天，day，因为默认每个月1日是显示xx月，想改成正常显示1。

还有移动端滑动冲突加上:disabled-week-view="true"就可以了

别的就没什么了，文档很详细~