【微信小程序】日历视图组件

组件介绍

日历展示功能

日期点击功能

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.参数

<calendar-view config="{{calendarConfig}}" color="#4ec4c8" title="日历视图" bind:click ="calendarViewDetailShow"></calendar-view>

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": "比例三"
    }]
}