適配mpvue平臺的的微信小程式日曆元件mpvue-calendar

mpvue-calendar

基於vue-calendar的適配mpvue平臺的的微信小程式日曆元件，現在已可以使用在瀏覽器端
GitHub地址

預覽

? 點選瀏覽器端預覽

安裝

npm i mpvue-calendar
複製程式碼

使用

• import Calendar from 'mpvue-calendar' 引入元件
• import 'mpvue-calendar/src/style.css' 引入樣式檔案(mpvue 小程式端)
• components中註冊元件Calendar
• template中使用元件<Calendar />

⚠️在瀏覽器端使用要引入下面browser-style.css替換上面的style.css

• import 'mpvue-calendar/src/browser-style.css' 引入樣式檔案(瀏覽器端)

引數及方法

引數or方法	型別	說明
months	Array	自定義月份，不傳預設為中文一到十二月
weeks	Array	自定義星期，不傳預設為中文日到六
value	Array	預設選中日期
begin	Array	限制開始日期，不傳則不限制
end	Array	限制結束日期，不傳則不限制
disabled	Array	禁用日期
events	Object	自定義備註
lunar	Boolean	是否顯示農曆，預設為false
monFirst	Boolean	是否每行日期以星期一作為開頭，預設為false(預設為星期日開頭)
completion	Boolean	是否補全日期，設為true時會以每月6行展示，不足6行的會用下月日期補齊，預設為false
clean	Boolean	是否為簡潔模式，簡潔模式下自定義備註會顯示為圓點，預設為false
now	Boolean or String	是否顯示今日，傳入字串時可以自定義日曆上今日的文字，預設為true
almanacs	Object	自定義節日，如{'11-14': '學生日', '11-22': '感恩日'}, 自定義節日會覆蓋元件預設節日
tileContent	Array	為每個具體日期自定義class和插入文字內容，具體用法見下
range	Boolean	是否為範圍模式，預設為false
multi	Boolean	是否為多選模式，預設為false
select(val, val2)	function	日期選中事件,在range模式下val為開始日期、val2為結束日期，非range模式下val為選中日期,val2為日期資訊
setToday()	function	元件例項中的方法，可以返回今日
renderer(year, month)	function	元件例項中的方法，可以重新渲染日期(引數中傳入渲染的年份和月份，需要為數字型別)
dateInfo(y, m, d)	function	元件例項中的方法，傳入年,月,日三個引數會返回當天的資訊(農曆、節氣、星座、星期、天干地支等)
selectYear(val)	function	選擇年份事件，val為選中的年份
prev(val)	function	選擇上一月事件，val為月份
next(val)	function	選擇下一月事件，val為月份
arrowLeft	String	自定義左箭頭圖片，填寫圖片路徑，不填則使用預設字型圖示
arrowRight	String	自定義右箭頭圖片，填寫圖片路徑，不填則使用預設字型圖示

• value 引數
  在普通模式下value為一維陣列如2018年6月21為[2018,6,21]
  在range和multi模式下value為二維陣列，如multi模式選中2018年6月21和6月28為[[2018,6,21], [2018,6,28]]
  在range模式下如果定義value引數必須定義開始日期和結束日期，如[[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']
• now 引數
  now引數可以選擇是否將今天日期展示為今字，傳入false則不展示，傳入字串則展示你定義等字串內容，預設為true展示今字樣
• tileContent 引數
  tileContent引數可以為具體某日定義一個class名，還可以插入一段文字內容。如[{date: '2018-9-20', className: 'holiday', content: '休'}]可以設定2018-9-20這天的class名為holiday，並且生成一個文字內容為 休 的dom節點

示例

<template>
  <div>
    <Calendar
      :months="months"
      :value="value"
      @next="next"
      @prev="prev"
      :events="events"
      lunar
      clean
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
      :arrowLeft="arrowLeft"
      :tileContent="tileContent"
      :almanacs="almanacs"
    />
    <button @click="setToday">返回今日</button>
    <button @click="dateInfo">日期資訊</button>
    <button @click="renderer">重新渲染年月日期</button>
  </div>
</template>

<script>
import Calendar from 'mpvue-calendar'
import 'mpvue-calendar/src/style.css'
import arrowLeft from '../assets/arrowLeft.png'

export default {
  data () {
    return {
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      disabledArray: ['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':'一條很長的明日備註'},
      almanacs: {'9-3': '抗戰勝利日', '11-17': '學生日'},
      tileContent: [
          {date: '2018-9-22', className: 'holiday ', content: '休'},
          {date: '2018-9-23', className: 'holiday ', content: '休'}
      ],
      arrowLeft: arrowLeft
    }
  },
  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() {
      this.$refs.calendar.setToday();
    },
    dateInfo() {
      const info = this.$refs.calendar.dateInfo(2018, 8, 23);
      console.log(info);
    },
    renderer() {
      this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
    },
    select(val, val2) {
      console.log(val)
      console.log(val2)
    }
  }
}
</script>
複製程式碼