用原生React组件实现日历自定义渲染

运行效果如下

1. 首先进入“代码”页，创建一个与.w同名的.myCalendar.js，例如：test.w -> test.myCalendar.js，复制如下代码

import React from 'react';
import PropTypes from "prop-types";
import { Calendar, Typography } from 'antd';
import moment from 'moment';
export default class MyCalendar extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            selectedDate: moment(new Date())    // 当前选中日期
        }
    }

    onSelect(date) {
        this.setState({
            selectedDate: date
        });
        if (this.props.onDateChange) {
            this.props.onDateChange(date);
        }
    }

    // 按日期查找对应的数据行
    getRow(date) {
        let data = this.props.data; // 通过 props 给进来的数据组件实例
        let rows = data.find(["date"], [date.format("YYYY-MM-DD")]);
        return rows.length == 0 ? null : rows[0];  
    }

    // 日历单元格渲染
    dateFullCellRender(date) {
        let now = new Date();
        let row = this.getRow(date);
        let caption = row ? "已写" : "未写"; // 在日期下面显示的文字
        // 外层容器样式
        let containerStyle = {
            display: date.isSame(this.state.selectedDate, "month") ? "" : "none", // 不是当前月的日期不显示
            height: "35px", 
            width: "35px",
            margin: "0 auto",
            borderRadius: "50%",
            fontSize: "12px",
            border: date.isAfter(now) ? "1px lightgray solid" : row ? "1px blue solid" : "1px red solid", // 边框   
            backgroundColor: date.isSame(this.state.selectedDate, "day") ? "dodgerblue" : date.isAfter(now) ? "lightgray" : date.isSame(now, "day") ? "yellow" : "" // 背景色
        };
        // 今天以后的日期居中样式
        let dateMiddle = !date.isAfter(now) ? {} : {
            position: "relative",
            top: "8px"
        }
        // 文本样式
        let textStyle = {
            display: date.isAfter(now) ? "none" : "" // 今天以后不显示文字
        };
        // 返回单元格内容
        return (
            <div style={containerStyle}>
                <div style={dateMiddle}>{date.date()}</div>
                <div style={textStyle}>{caption}</div>
            </div>
        );
    }

    render() {
        return <Calendar 
            value={this.state.selectedDate} 
            onSelect={(value)=>this.onSelect(value)} 
            dateFullCellRender={(date)=>this.dateFullCellRender(date)} 
            fullscreen={false} 
            style={{width: "100%", height: "100%"}}
        />
    }
}

以上代码中与外部数据相关的主要是getRow相关的代码，需要修改与自己的数据适配

2. 进入.w的“源码”页，在需要显示日历的地方加入如下代码

    <wx:reactContainer data="__@ATTR-BEGIN@__{this.wxPageDeclaration?.$page?.comp('calendarData')}__@ATTR-END@__" id="myCalendar" onDateChange="__@ATTR-BEGIN@__{this.wxPageDeclaration?.$page?.onCalendarDateChange.bind(this.wxPageDeclaration?.$page)}__@ATTR-END@__"/>

以上代码中id属性的值与前面js的文件名的中缀相对应，即通过这个代码加载前面的原生react组件
data属性中的calendarData改成自己需要使用的数据组件，这个data属性与前面js代码中的this.props.data相对应，即通过data属性将页面组件对象传给原生react组件的props
onDateChange属性对应下面的JS事件回调，当日历组件的日期改变时会进入下面的断点，调用点在原生react组件的onSelect代码中，即原生react组件的事件触发到.w的JS代码中

3. 进入.w的“JS”页，在代码中加入如下代码

    onCalendarDateChange(date) {
        debugger;
    }