如何更改 React-big-calendar 中组件事件的默认道具？答案

【问题标题】：How change default props of the component event in React-big-calendar?如何更改 React-big-calendar 中组件事件的默认道具？
【发布时间】：2021-11-02 15:18:50
【问题描述】：

我想用 React-big-calendar

关于默认组件事件，它包含以下详细信息：
开始时间，时间结束，标题，无论是不是“全天”活动，该事件也可能相关的任何资源

我需要在这个组件中添加 3 个其他细节，我该怎么做？我看到我可以自定义组件的样式但我不知道如何添加道具。我希望我的问题很清楚，我是开发新手，这是我第一次在这里发帖。

非常感谢您的帮助！

【问题讨论】：

标签： reactjs react-big-calendar

【解决方案1】：

您添加到“事件”的任何道具（即，描述属于您的 events 数组道具的一部分的“事件”的对象）都可以在其 event 道具中用于您的自定义事件。例如，我的自定义事件布局如下所示：

const StandardEvent = ({ event }) => {
  const { timezone } = useAppointments();
  return (
    <div className={styles.customEventLayout}>
      <div className={styles.eventTitle}>
        {event.PatientFamilyName && event.PatientGivenName && (
          <Fragment>
            <StatusIndicator event={event} />
            <span className="text-strong">
              {event.PatientFamilyName}, {event.PatientGivenName}
            </span>
            <br />
          </Fragment>
        )}
        <span
          className={classnames({
            'text-strong': !event.PatientFamilyName && !event.PatientGivenName,
          })}
        >
          {event.EncounterTypeDescription}
        </span>
      </div>
      <div className={styles.eventDate}>
        {moment.tz(event.StartDateTime, timezone).format('hh:mm a')}
      </div>
    </div>
  );
};

从代码中可以看出，我的“事件”结构（来自数据库，在日期转换之前，然后放入我的 events 属性）看起来有点像：

{
  "StartDateTime": "2021-11-07T08:15:00Z",
  "EndDateTime": "2021-11-07T08:30:00Z",
  "PatientGivenName": "Robert",
  "PatientFamilyName": "Plant",
  "EncountTypeDescription": "Annual Physical",
  "IsAllDayAppointment": false
}

【讨论】：

感谢您的解释 Steve-Cutter-Blades！