antd日历组件dateCellRender常用用法

Ant Design 的日历组件（Calendar）中的 `dateCellRender` 属性可以用于自定义日期单元格的渲染方式。常见的用法有以下几种：

1. 在日期单元格中显示日期

<Calendar
  dateCellRender={(date) => {
    return <div>{date.date()}</div>;
  }}
/>

在这个例子中，我们传入了一个函数作为 `dateCellRender` 的值。函数接收一个 `date` 参数，代表当前日期。我们使用 `date.date()` 方法获取日期，并将其渲染到一个 `div` 元素中。

2. 在日期单元格中显示事件数量

const events = [
  { date: '2022-03-08', count: 2 },
  { date: '2022-03-09', count: 1 },
  { date: '2022-03-10', count: 3 },
];

<Calendar
  dateCellRender={(date) => {
    const event = events.find((e) => e.date === date.format('YYYY-MM-DD'));
    if (event) {
      return <div>{event.count}</div>;
    } else {
      return null;
    }
  }}
/>

在这个例子中，我们定义了一个 `events` 数组，包含了每个日期对应的事件数量。在 `dateCellRender` 函数中，我们使用 `find` 方法查找当前日期对应的事件，如果找到了，就渲染事件的数量，否则返回 `null`。

3. 在日期单元格中显示自定义内容

<Calendar
  dateCellRender={(date) => {
    if (date.date() === 1) {
      return (
        <div>
          <span style={{ color: 'red' }}>New Year's Day</span>
        </div>
      );
    } else {
      return null;
    }
  }}
/>

在这个例子中，我们判断当前日期是否为每个月的第一天，如果是，就渲染一个自定义的文本内容，否则返回 `null`。

以上是 `dateCellRender` 常见的用法，通过这个属性，我们可以方便地自定义日期单元格的渲染方式，使得日历组件更加符合我们的需求。