vue-quick-calendar

vue-quick-calendar

轻量级的Vue日历组件，兼容PC端和移动端，组件功能介绍在这里：vue-quick-calendar

一、安装方法：

1. npm安装

npm install vue-quick-calendar

2.yarn安装

yarn add vue-quick-calendar

二、引入方法：

1. 全局引入

// main.js中
import VueQuickCalendar from 'vue-quick-calendar'
Vue.use(VueQuickCalendar)

2. 组件内部引入

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

三、使用方法

<template>
  <vue-quick-calendar
    showPrepNext
    startYearMonth='2021-01'
    :markDate="markDate"
    :checkedDate='checkedDate'
    @clickDate="clickDate"
    @changeMonth="changeMonth"
  />
</template>

<script>
// 若全局引入，此处不需要再引入
import vueQuickCalendar from 'vue-quick-calendar'
export default {
  components: {
    // 若全局引入，此处不需要再引入
    vueQuickCalendar
  },
  data () {
    return {
      markDate: ['2021/1/1', '2021-01-12', '2021-1-18', '2021-01-20'],
      // date: '2021-01-20'
      checkedDate: '2021/01/20'
    }
  },
  created () {
  },
  methods: {
    // 点击日期
    clickDate (date) {
      console.log(date)
    },
    // 切换月份
    changeMonth (date) {
      console.log(date)
    }
  }
}
</script>

<style lang='scss' scoped>
</style>

四、Calendar Attributes

五、Calendar Events

长期维护中…