如果我在 React.js 中使用 cellRender，antd 日历会重复日期

Question

我试图在几个月内重复使用 antd 日历组件，并突出显示每个日历上的一些特定日期（浅绿色）。为了执行此功能，我使用

cellRender

自定义日历。

但是当我这样做时，它会复制每个日历上的日期，如下图所示。而且日期也是不可选择的。另一件事是，默认情况下它始终保持选择当前日期（深绿色）。我的问题是，

1. 如何保持默认选择的日期不被选择。
2. 如何避免这种日期重复？
3. 仍然可以根据需要选择日期？

这些是使用的软件包版本：

React version:     "react": "^18.2.0",

antd version:     "antd": "^5.4.6",

代码片段：

日历列表.jsx

import React from 'react'
import CalendarCard from './card/CalendarCard'
import dayjs from 'dayjs';
import './CalenderList.css';

let currentMonth = dayjs().month();
const monthsCount = 12;
const days = ['Wednesday', 'Thursday'];

const CalendarList= () => {
  return (
    <div className='CalendarList'>
      {Array.from({ length: monthsCount }, (_, i) => (
        <CalendarCard key={i} month={dayjs().month(currentMonth + i)}  days={days}/>
      ))}
    </div>
  )
}

export default CalendarList

日历卡.jsx

import React from 'react';
import { Calendar, theme } from 'antd';
import './CalendarCard.css';

const CalendarCard = ({ month, days }) => {
    const { token } = theme.useToken();

    const dateCellRender = (value) => {
        if (value.month() === month.month()) {
            const dayOfWeek = value.format('dddd');
            if (days.includes(dayOfWeek)) {
                return <div className='highlighted-day'>{value.date()}</div>
            }
        }
        return <div>{value.date()}</div>
    };

    const headerRender = ({ value }) => {
        return (
            <div style={{ padding: '10px', textAlign: 'center', fontSize: '16px', fontWeight: 'bold' }}>
                {value.format('MMMM YYYY')}
            </div>
        );
    }

    const onDateSelect = (value) => {
        console.log(value)
    }

    const wrapperStyle = {
        width: 300,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
    };

    return (
        <div style={wrapperStyle}>
            <Calendar
                fullscreen={false}
                headerRender={headerRender}
                value={month}
                mode='month'
                onSelect={onDateSelect}
                cellRender={dateCellRender}
            />
        </div>
    )
}

export default CalendarCard

日历卡.css

.highlighted-day  {
    background-color: #87d068;
    color: white;
    border-radius: 4px;
}

点击打开代码和框

Answer 1

docs定义了2个cellRenderer方法：

dateCellRender

和

dateFullCellRender

。第一个将您的内容“追加”到单元格的默认内容下方，而第二个则“仅”显示回调返回的值。将道具名称从 dateCellRender 更改为 dateFullCellRender。这应该删除默认内容。