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>
複製程式碼