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

user_13859363 0
Viewed 1204

I am looking into ant design calendar documentation.

I want to set events in specific days in current month. I am using this code which provide ant design documentation. But in their code created events were shown in every month.

How can I show for example in April only?

Because in my case I should receive from backend list of events in different years, months and dates and show in calendar.

Here is ant design documentation code

    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")
    );

And this one is my code which I am receiving from backend.

formattedBooking is my data from backend

     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}
        />
     );

Please help me resolve this problem.

antd reactjs javascript
1 Answers

Each value has sent to getListData is a moment object related to a specific day on the calendar view, so you can parse it as the same date format in your backend response, and decide what you want to render in that speceific day. here is an example:

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 is the edited version of your sandbox.

user_119779290
Related