如何更改React-big-calendar中组件事件的默认属性？

Question

我想使用React-big-calendar

关于默认组件事件，它包含以下详细信息：

开始时间，结束时间，标题，是否是“全天”事件，任何资源事件也可能是相关的

我需要在此组件中添加其他3个详细信息，我该如何做？我发现我可以定制组件的样式，但我不知道如何添加道具。我希望我的问题是清楚的，我是新开发的，这是我第一次在这里发帖。

非常感谢你的帮助！

Answer 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
}