日历 Ant Design：如何使用 React JS 仅在一个月中的特定日期显示事件

Question

我正在研究 ant design 日历 documentation。

我想在当月的特定日期设置事件。我正在使用这个 code 提供 ant 设计文档。但是在他们的代码中，每个月都会显示创建的事件。

例如，我如何才能仅在 4 月展示？

因为在我的例子中，我应该从后端接收不同年份、月份和日期的事件列表并显示在日历中。

这里是ant design文档代码

    function getListData(value) {
     let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: "warning", content: "This is warning event." },
            { type: "success", content: "This is usual event." }
          ];
          break;
        default:
      }
      return listData || [];
    }

    function dateCellRender(value) {
      const listData = getListData(value);
      return (
        <ul className="events">
          {listData.map((item) => (
            <li key={item.content}>
              <Badge status={item.type} text={item.content} />
            </li>
          ))}
        </ul>
      );
    }

    ReactDOM.render(
      <Calendar dateCellRender={dateCellRender} />,
      document.getElementById("container")
    );

这是我从后端收到的代码。

formattedBooking 是我来自后端的 data

     const getListData = value => {
     const listData = [];
      if (formattedBookings && formattedBookings[value.date()]) {
        formattedBookings[value.date()].forEach(booking => {
          listData.push({
            type: 'success',
            content: `${booking.address}`,
          });
        });
      }
     return listData;
    };



    const dateCellRender = value => {
    const listData = getListData(value);
    return (
      <ul className='events'>
        {listData.map((item, index) => (
          <li key={`${item.content}-${index}`}>
            <Badge status={item.type} text={item.content} />
          </li>
        ))}
      </ul>
     );
    };



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

请帮我解决这个问题。

Answer 1

发送到getListData的每个值都是与日历视图上特定日期相关的时刻对象，因此您可以在后端响应中将其解析为相同的日期格式，并决定您想要什么在那个特定的日子呈现。这是一个例子：

function getListData(value) {
  let listData;
  let dateValue = value.format("yyyy/MM/DD"); // you can parse value in every format you want
  switch (dateValue) {
    case "2021/12/26":
      listData = [
        { type: "warning", content: "This is warning event." },
        { type: "success", content: "This is usual event." }
      ];
      break;
    case "2022/01/12":
      listData = [
        { type: "error", content: "This is error event 1." },
        { type: "error", content: "This is error event 2." },
        { type: "error", content: "This is error event 3." }
      ];
      break;
    case "2022/02/08":
      listData = [
        { type: "success", content: "This is usual event1." },
        { type: "success", content: "This is usual event2." }
      ];
      break;
    default:
  }
  return listData || [];
}

Here 是沙盒的编辑版本。

日历 Ant Design：如何使用 React JS 仅在一个月中的特定日期显示事件

calendar Ant Design: how to show event only in specific day in month using React JS

javascript

reactjs

antd