日歷 Ant 設計：如何使用 React JS 僅在一個月中的特定日期顯示事件

Question

我正在研究 ant 設計日歷文檔。

我想在當月的特定日期設置事件。 我正在使用提供 ant 設計文檔的代碼。 但在他們的代碼中，每個月都會顯示創建的事件。

例如，我如何僅在四月展示？

因為在我的情況下，我應該從后端收到不同年份、月份和日期的事件列表並顯示在日歷中。

這里是 ant 設計文檔代碼

    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是我來自后端的數據

     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的每個值都是與日歷視圖上的特定日期相關的時刻 object，因此您可以在后端響應中將其解析為相同的日期格式，並決定您要在該特定日期呈現什么。 這是一個例子：

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 || [];
}

這是您的沙盒的編輯版本。