Блог

Я хочу использовать React-большой календарь

Что касается события компонента по умолчанию, оно содержит следующие сведения:
время начала, время окончания, название, независимо от того, является ли это событием «на весь день» или нет, любой ресурс, с которым это событие также может быть связано

Мне нужно добавить еще 3 детали в этот компонент, как я могу это сделать? Я видел, что могу настроить стиль компонента, но я не знаю, как добавить реквизит. Я надеюсь, что мой вопрос ясен, я новичок в разработке, и это первый раз, когда я публикую здесь.

Большое вам спасибо за вашу помощь!

Любые реквизиты, которые вы добавляете в свое «событие» (то есть объект, описывающий «событие», которое является частью вашего events реквизита массива), доступны для вашего пользовательского события в его event реквизите. Например, мой пользовательский макет события выглядит примерно так:

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

Как вы можете немного понять из кода, моя структура «событий» (из базы данных и непосредственно перед преобразованиями даты, прежде чем перейти в мою events поддержку) выглядит немного так:

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