適配mpvue平臺的的微信小程序日曆組件mpvue-calendar

mpvue-calendar

基於vue-calendar的適配mpvue平臺的的微信小程序日曆組件

預覽

安裝

npm i mpvue-calendar

使用

• import Calendar from 'mpvue-calendar' 引入組件
• components中註冊組件Calendar
• template中使用組件<Calendar />

參數及方法

參數or方法	類型	說明
months	Array	自定義月份，不傳默認爲中文一到十二月
weeks	Array	自定義星期，不傳默認爲中文日到六
value	Array	默認選中日期
begin	Array	限制開始日期，不傳則不限制
end	Array	限制結束日期，不傳則不限制
disabled	Array	禁用日期
events	Object	自定義備註
lunar	Boolean	是否顯示農曆，默認爲false
clean	Boolean	是否爲簡潔模式，簡潔模式下自定義備註會顯示爲圓點，默認爲false
range	Boolean	是否爲範圍模式，默認爲false
multi	Boolean	是否爲多選模式，默認爲false
select(val, val2)	function	日期選中事件,在range模式下val爲開始日期、val2爲結束日期，其餘val爲選中日期
setToday()	function	返回今日
selectYear(val)	function	選擇年份事件，val爲選中的年份
prev(val)	function	選擇上一月事件，val爲月份
next(val)	function	選擇下一月事件，val爲月份

• value 參數

在普通模式下value爲一維數組如2018年6月21爲[2018,6,21]
在range和multi模式下value爲二維數組，如range模式選中2018年6月21到6月28爲[[2018,6,21], [2018,6,28]]

• events 參數

events爲自定義備註，例如備註2018年6月21日爲{'2018-6-21': '今日備註', '2018-6-22':'明日備註'}，在clean模式下備註爲圓點，lunar農曆模式下不顯示備註

• disabled 參數

disabled爲禁用日期，如禁用2018-6-21日爲['2018-6-21']

示例

<template>
  <div>
    <Calendar
      :months="months"
      :value="value"
      @next="next"
      @prev="prev"
      :events="events"
      lunar
      clean
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
    />
    <button @click="setToday">返回今日</button>
  </div>
</template>

<script>
import Calendar from 'mpvue-calendar'

export default {
  data () {
    return {
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      disabledarr: ['2018-6-27','2018-6-25'],
      value: [2018,6,7],
      begin:[2016,1,1],
      end:[2020,1,1],
      events: {'2018-6-7':'今日備註', '2018-6-8':'一條很長的明日備註'},
    }
  },
  components: {
    Calendar
  },
  methods: {
    selectMonth(month,year){
      console.log(year,month)
    },
    prev(month){
      console.log(month)
    },
    next(month){
      console.log(month)
    },
    selectYear(year){
      console.log(year)
    },
    setToday(val,val1,val2) {
      this.$refs.calendar.setToday();
    },
    select(val, val2) {
      console.log(val)
      console.log(val2)
    }
  }
}
</script>