Calendar Ant Design：如何显示可变日期的事件？

Question

我正在寻找一种在 Ant Desing 日历中显示事件的方法，使用 dateCellRender 和来自变量对象的日期，如下所示：

[
    {
        "id": 1,
        "content": "Example",
        "date": "01/05/2022",
        "horario": [
            "2022-05-26T06:00:00.925Z",
            "2022-05-26T07:00:00.478Z"
        ],
    },
    {
        "id": 2,
        "content": "Example",
        "date": "08/05/2022",
        "horario": [
            "2022-05-26T11:00:00.859Z",
            "2022-05-26T14:00:00.976Z"
        ],
    }
]

显示事件的正常方式是使用开关，就像您在 AntD 的这个 CodeSandbox 中看到的那样：https://codesandbox.io/s/ruj266

我的对象来自后端并且会一直变化，有没有办法使用该对象显示动态事件？

Answer 1

由于antd日历与moment对象一起工作，所以当您尝试渲染日历时，您可以使用format时刻方法将当前日期的值转换为字符串像这样的对象：

<Calendar dateCellRender={(value) => {
  const stringValue = value.format("DD/MM/yyyy");
  return (...);
};} />;

并将 format 方法的结果与您数据中的日期值进行比较，我通过在 codesandbox 上使用您的数据示例实现了一个示例：

antd-calendar-example

这是您要找的吗？

Calendar Ant Design：如何显示可变日期的事件？

Calendar Ant Design: How to show events with variable dates?

typescript

reactjs

antd