組件介紹

日歷展示功能

日期點(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小時", // 選中日期下方文字
            "top": "1節(jié)課", // 選中日期上方文字
            "list": [] // 點(diǎn)擊日期時會返回的參數(shù)袱巨，參數(shù)名和參數(shù)值可任意
        },
        {
            "date": "2021-03-29",
            "bottom": "2小時",
            "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小時",
    "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": "比例三"
    }]
}