组件介绍
日历展示功能
日期点击功能
git地址
https://gitee.com/gnliscream/calendar-view
软件架构
使用微信小程序自定义组件开发
小程序自定义组件官网：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
使用说明
目录结构
使用步骤
1.下载组件源代码，放入小程序里自己定义的组件文件夹（例如/components）
2.创建需要调用日历视图组件的界面（例如/pages/image）
3.全局引入calendar-view组件
4.参数
config: 日历显示范围和选中状态配置
this.setData({
calendarConfig: {
selectedDates: [ // 选中日期列表
{
"date": "2021-03-01", // 选中的日期
"bottom": "2小时", // 选中日期下方文字
"top": "1节课", // 选中日期上方文字
"list": [] // 点击日期时会返回的参数，参数名和参数值可任意
},
{
"date": "2021-03-29",
"bottom": "2小时",
"top": "1节课",
"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" // 结束日期
}
})
color: 选中日期背景色（可使用#rgb或者颜色英文例如red）
title：日历视图标题
5.事件
单击事件 bind:click ="calendarViewDetailShow"
calendarViewDetailShow(e){
console.log(e.detail)
}
单击2021-03-29的日期，e.detail返回的数据如下,相比传过去的参数，返回的字段多了
isSelect：是否是选中日期
day：日期
{
"date": "2021-03-29",
"isSelect": true,
"day": 29,
"bottom": "2小时",
"top": "1节课",
"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": "比例三"
}]
}