適配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>
複製代碼