vue-phone-calendar

A Vue Calendar 一个vue编写的日历插件

安装

npm install vue-phone-calendar

使用

// ES6
import vueCalendar from 'vue-phone-calendar'


// 作为组件的方式使用
<calendar :states="dateInfo" @pickPre="pickPre" @pickNext="pickNext" @pickYearMonth="pickYearMonth" @changeDay="changeDay"></calendar>

<script>
import calendar from '../components/Calendar'
export default {
  
  data() {
    return {
	//为当月1号开始每天的状态
       dateInfo:[1,2,3,3,0,0,2]
	   //0：无状态（默认）；1：绿色；2：橙色；3红色
    }
  },
  methods: {
    pickPre (date) {
      alert(date)
    },
    pickNext (date){
      alert(date)
    },
    pickYearMonth (date){
      alert(date)
    },
    changeDay(date){
      alert(date)
    }
  }
};
</script>

Props

| name | Description | type |default| | ----------------- | ---------------- | :--------: | :----------: | | states | 当月1号开始每天状态 |Array| 每天都为‘0’ | pickPre | 点击上一月回调 |Function | 可通过参数"date"取到相关事件 | pickNext | 点击下一月回调 |Function | 可通过参数"date"取到相关事件 | pickYearMonth | 点击当前年月回调 |Function | 可通过参数"date"取到相关事件 | changeDay | 点击某一天回调 |Function | 可通过参数"date"取到相关事件