assistant-todo-mobile/src/pages/ToDoCal/index.jsx

import {Calendar, Tag} from "antd-mobile";
import dayjs from "dayjs";
import {TaskCount} from "../TaskCount";
import React, {Fragment, useEffect, useLayoutEffect, useRef} from "react";

import {
    dateStartUtcFormat,
    nextDateStartUtcFormat,
} from "../../utils/timeFormatUtil";
import {getTaskCount} from "../../utils";
import {FrownFill, SmileFill} from "antd-mobile-icons";
import {NEW, OVERDUE, UNDER_WAY} from "../../utils/commonConstant";
const ToDoCal = (props) => {
    const calRef = useRef(null);
    const [currentDay, setCurrentDay] = React.useState(new Date())
    const today = new Date()
    const [allDay,setAllDay] = React.useState([])
    const [taskCount,setTaskCount] = React.useState([])
    function listTaskCount(){
        if (allDay.length === 0){
            return
        }
        getTaskCount(dateStartUtcFormat(allDay[0]),
            nextDateStartUtcFormat(allDay[allDay.length-1]))
            .then(res => {
                setTaskCount(res)
            })
    }
    useLayoutEffect(()=>{
        console.log("useLayoutEffect",allDay)

        listTaskCount();
    },[])
    function backToToday(){
        calRef.current.jumpToToday();
        setCurrentDay(today)
    }
    return (
        <Fragment>
            <Calendar
                ref={calRef}
                selectionMode='single'
                renderLabel={date => {
                    allDay.push(date)

                    // 没有任务不显示
                    return taskCount.filter(taskC => dayjs(taskC.todoDay).isSame(dayjs(date), 'date'))?.map(taskC => {
                        // 如果有逾期的      红色
                        // Object.keys() 返回一个包含对象自身所有可枚举属性的数组
                        // Object.entries() 返回一个包含对象所有可枚举属性的键值对数组。
                        if (Object.keys(taskC.state).length>0){
                            console.log("taskC.state",taskC.state)
                            if (taskC.state[OVERDUE]){
                                return <FrownFill color='var(--adm-color-danger)'/>;
                            }
                            // 如果有未完成的任务 warn
                            if (taskC.state[NEW]||taskC.state[UNDER_WAY]){
                                return <SmileFill color='var(--adm-color-warning)'/>;
                            }
                            // 任务全部完成      绿色
                            return <SmileFill color='var(--adm-color-success)'/>;
                        }
                    })

                    // if (dayjs(date).isSame(today, 'day')) return '今天'
                    // if (date.getDay() === 0 || date.getDay() === 6) {
                    //     return '周末'
                    // }
                }}
                // renderDate={date=>{
                //     return <span style={{"color":"red"}}>{dayjs(date).date()}</span>
                // }}
                defaultValue={currentDay}
                onChange={val => {
                    setCurrentDay(val)
                }}

            />
            <TaskCount currentDay={currentDay} taskCount={taskCount} today={today} backToToday={backToToday}/>
        </Fragment>
    )
}
export default ToDoCal;