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

Question

I am looking for a way to show events in an Ant Desing Calendar using dateCellRender with the dates from an variable object, like this one:

[
    {
        "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"
        ],
    }
]

The normal way to show events is using a switch, like you can see in this CodeSandbox from AntD: https://codesandbox.io/s/ruj266

My object comes from the backend and will always change, there is a way to show dynamic events using that object?

Answer 1

Since antd calendar works with moment object, so when you try to render the calendar, you can covert the value of current date to string by using format method of moment object like this:

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

and compare the result of format method with date values in your data, I implemented an example by using of your data example here on codesandbox:

antd-calendar-example

is this what you are looking for?