antd design 组件中的Calender 解决设置日期单元格内容导致其他月份也有同样的单元格内容问题 (react)

问题描述

提示：react项目在使用Calender输出数据其他月份的日期单元格也会有同样的数据：

例如：

---

解决方案：

我们可以在循环的时候判断过滤掉：

import { PageContainer } from '@ant-design/pro-components';
import {Calendar,Tag} from "antd";
import moment from 'moment';
import React, { useEffect, useState, useRef } from 'react';
import styles from './AttendanceSystem.less';
const date = new Date();
let time = date.getFullYear() + '-' + '0' + (date.getMonth() + 1) + '-' + date.getDate();
//这里我用的是函数组件
const AttendanceSystem = () => {
  //这个是我们循环的数据,日期是用来判断的
const [attendanceDate, setAttendanceDate] = useState([
    {
      date: '2022-08-1',
      state: 0, //正常 green
    },
    {
      date: '2022-08-2',
      state: 1, //迟到 yellow
    },
    {
      date: '2022-08-3',
      state: 2, //旷工 red
    },
    {
      date: '2022-08-4',
      state: 3, //休假 blue
    },
    {
      date: '2022-08-5',
      state: 3, //休假 blue
    },
    {
      date: '2022-08-6',
      state: 3, //休假 blue
    },
    {
      date: '2022-08-7',
      state: 3, //休假 blue
    },
  ]);
  const getListData = (value) => {
    let listData;
    // console.log(value.date());
    for (let i = 0; i < attendanceDate.length; i++) {
      let date = attendanceDate[i].date.split('-');
      let month = value.month() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      if (
        value.date().toString() == date[2] &&
        month == date[1] &&
        value.year().toString() == date[0]
      ) {
        // console.log('判断日期成功');
        switch (attendanceDate[i].state) {
          case 0:
            listData = [{ color: 'green', content: '正常' }];
            break;
          case 1:
            listData = [{ color: 'yellow', content: '迟到' }];
            break;
          case 2:
            listData = [{ color: 'red', content: '旷工' }];
            break;
          case 3:
            listData = [{ color: 'blue', content: '休假' }];
            break;
          default:
        }
      }
    }
    return listData || [];
  };
  
    const dateCellRender = (value) => {
    const listData = getListData(value);
    return (
      <ul className="events">
        {listData.map((item) => (
          <li key={item.content}>
            <Tag color={item.color}>{item.content}</Tag>
          </li>
        ))}
      </ul>
    );
  };
//这个是显示的日期,只可当天之前的日期
  const disabledDates = (current) => {
  	//只能选择当前月份
  	// return (
    // (current && current < moment(time).startOf('month')) || current > moment(time).endOf('month')
    // );
    // 当天之前
    return current && current > moment().subtract(0, 'days');
    //当天之后
    // return current && moment(current).isBefore(moment(), 'day');
  };
	const monthCellRender = (value) => {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  };
  return (
    <PageContainer>
      <Card>
        <Calendar
                    onSelect={(date) => {
                      console.log(date.year(), date.month(), date.date());
                    }}
                    disabledDate={disabledDates}
                    dateCellRender={dateCellRender}
                    monthCellRender={monthCellRender}
                  />
      </Card>
    </PageContainer>
  );
};

export default AttendanceSystem;

最终效果：