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

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 举例 | |:------:| :------: | :------: | :------: | :------: | :------: | | startYearMonth | 初始年月 | String | — | 今年本月 | '2020-01'、'2020/1' | | markDate | 需要标记的日期数组 | Array | — | — | ['2020-01-01', '2020/1/2'] | | checkedDate | 选中的日期 | String | — | — | '2020-01-01'、'2020/1/1' | | mondayStart | 是否从周一开始，默认周日开始 | Boolean | true/false | false | — | | showPrepNext | 是否显示上个月和下个月日期 | Boolean | true/false | true | — | | foldDateSwitch | 控制是否折叠【非今天日期】或者【非选中日期】所在的行 | Boolean | true/false | false | — | | weekColor | 星期字体颜色 | String | hsl / hsv / hex / rgb | #444 | — | | fontColor | 日期字体颜色 | String | hsl / hsv / hex / rgb | #000 | — | | markColor | 标记点颜色 | String | hsl / hsv / hex / rgb | #ff6633 | — | | activeColor | 选中的日期字体颜色 | String | hsl / hsv / hex / rgb | #fff | — | | activeBgColor | 选中的日期背景颜色 | String | hsl / hsv / hex / rgb | #ff6633 | — |

五、Calendar Events

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

长期维护中…