Vue-quick-calendar NPM

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	—