reactjs - 如何为 react-calendar 创建事件

Question

如何在反应日历中添加事件？

这是我的项目的样子：

我是否需要在后端创建一个事件模式，然后创建 useState 以使事件保存在日历中？有什么有效的方法吗？我该怎么做？

这是我在 Calendar.js 中的以下代码：

<div className="calendar-tab">
  <div className="event-view-container">
    <div className="event-date">
      <p className="event-date-monthday">{moment(date).format("D")}</p>
      <p className="event-date-weekday">{moment(date).format("dddd")}</p>
    </div>
    <div className="event-list">
      {eventList.map((event, index) => (
        <Accordion
          key={`event-${index}`}
          square
          expanded={expanded === `event${index + 1}`}
          onChange={handleChangeAccordion(`event${index + 1}`)}
        >
          <AccordionSummary>
            <div className="event-list-item-header">
              <span className="duration">{`${moment(
                event.duration.from
              ).format("h:mm A")} - ${moment(event.duration.to).format(
                "h:mm A"
              )}`}</span>
              <span className="title">{event.title}</span>
            </div>
          </AccordionSummary>
          <AccordionDetails>
            <div className="event-list-item-content">
              <div className="header">
                <span className="announcements">Announcements</span>
                <div className="plus">
                  <ControlPoint />
                </div>
              </div>
              <div
                className="content"
                dangerouslySetInnerHTML={{ __html: event.content }}
              />
            </div>
          </AccordionDetails>
        </Accordion>
      ))}
    </div>
  </div>
  <div className="calendar-view-container">
    <div className="event-calendar-container">
      <EventCalendar
        className="event-calendar"
        formatShortWeekday={(locale, date) =>
          moment(date).format("dd").charAt(0)
        }
        tileClassName={({ date }) => {
          if (events.find((x) => moment(x.date).isSame(date, "day"))) {
            return "highlight";
          }
        }}
        onChange={(value) => handleChangeCalendar(value)}
        nextLabel={<NavigateNext />}
        prevLabel={<NavigateBefore />}
      />
      <div className="add-event">
        <ControlPoint  />
      </div>
    </div>
  </div>
</div>

标签： reactjsreact-calendar