如何使用antd里的日历组件自定义日程

要使用 Ant Design 中的日历组件来自定义日程，你需要完成以下步骤：

1. 导入 Calendar 组件和 moment 库：

import { Calendar } from 'antd';
import moment from 'moment';

2. 设置 Calendar 组件的 dateCellRender 属性，该属性接受一个函数，用于渲染每个日期单元格的内容。在这个函数中，你可以根据需要自定义每个日期单元格的内容，例如添加日程信息等。

function dateCellRender(value) {
  // 根据日期获取日程信息
  const schedule = getSchedule(value);

  // 如果有日程信息，渲染日程内容
  if (schedule) {
    return (
      <div>
        <div>{value.date()}</div>
        <div>{schedule.title}</div>
      </div>
    );
  }

  // 没有日程信息，只渲染日期
  return value.date();
}

<Calendar dateCellRender={dateCellRender} />

3. 实现 getSchedule 函数，该函数用于获取某个日期的日程信息。你可以从后端或本地存储中获取日程信息，并根据需要进行处理。

function getSchedule(date) {
  // 从后端或本地存储中获取日程信息
  const schedule = getScheduleFromServer(date);

  // 处理日程信息
  // ...

  return schedule;
}

以上是使用 Ant Design 中的日历组件自定义日程的基本步骤，你可以根据自己的需求进行修改和扩展。