組件介紹
日歷展示功能
日期點(diǎn)擊功能
git地址
https://gitee.com/gnliscream/calendar-view
軟件架構(gòu)
使用微信小程序自定義組件開發(fā)
小程序自定義組件官網(wǎng)：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
使用說明
目錄結(jié)構(gòu)
使用步驟
1.下載組件源代碼，放入小程序里自己定義的組件文件夾（例如/components）
2.創(chuàng)建需要調(diào)用日歷視圖組件的界面（例如/pages/image）
3.全局引入calendar-view組件
4.參數(shù)
<calendar-view config="{{calendarConfig}}" color="#4ec4c8" title="日歷視圖" bind:click ="calendarViewDetailShow"></calendar-view>
config: 日歷顯示范圍和選中狀態(tài)配置
this.setData({
calendarConfig: {
selectedDates: [ // 選中日期列表
{
"date": "2021-03-01", // 選中的日期
"bottom": "2小時(shí)", // 選中日期下方文字
"top": "1節(jié)課", // 選中日期上方文字
"list": [] // 點(diǎn)擊日期時(shí)會(huì)返回的參數(shù)，參數(shù)名和參數(shù)值可任意
},
{
"date": "2021-03-29",
"bottom": "2小時(shí)",
"top": "1節(jié)課",
"list": [{
"creator": "1331255738911162368",
"createTime": "2021-03-29 18:54:16",
"updateTime": "2021-03-29 18:54:27",
"deleted": false,
"courseRecordId": "1376487868398043136",
"studentId": "1330535521876705280",
"courseDuration": 2,
"startTime": "2021-03-29 18:30:00",
"endTime": "2021-03-29 20:30:00",
"remark": "比例三"
}]
}
],
startDate: "2021-03-01", // 開始日期
endDate: "2021-04-22" // 結(jié)束日期
}
})
color: 選中日期背景色（可使用#rgb或者顏色英文例如red）
title：日歷視圖標(biāo)題
5.事件
單擊事件 bind:click ="calendarViewDetailShow"
calendarViewDetailShow(e){
console.log(e.detail)
}
單擊2021-03-29的日期，e.detail返回的數(shù)據(jù)如下,相比傳過去的參數(shù)，返回的字段多了
isSelect：是否是選中日期
day：日期
{
"date": "2021-03-29",
"isSelect": true,
"day": 29,
"bottom": "2小時(shí)",
"top": "1節(jié)課",
"list": [{
"creator": "1331255738911162368",
"createTime": "2021-03-29 18:54:16",
"updateTime": "2021-03-29 18:54:27",
"deleted": false,
"courseRecordId": "1376487868398043136",
"studentId": "1330535521876705280",
"courseDuration": 2,
"startTime": "2021-03-29 18:30:00",
"endTime": "2021-03-29 20:30:00",
"remark": "比例三"
}]
}
