popupDetailBody implementation

[jellypizza]

Hello, I'm new to react and I wanted to use this library, my current question is if I can add new information from my rest api into the event popup (my events has one more property called 'lead' that I want to show on the popup)

From what I've read in the documentation, popupDetailbody should do the trick, but I am still unsure as the documentation only shows that I need to return the body, what kind of parameters can I enter here
const calendarOptions = { template: { popupDetailBody({body}) { return body; } }
Thanks

[adhrinae]

That's just a default template value. the popupDetailBody template function takes the EventObject itself and you can leverage it.

First, you need to set an arbitrary value to the body property. because the detail popup doesn't expose the popupDetailBody template if the body property is empty.

tui.calendar/apps/calendar/src/components/popup/eventDetailSectionDetail.tsx

Lines 75 to 81 in 29a095d

	{body && (
	<div className={classNames.detailItemSeparate}>
	<span className={classNames.content}>
	<Template template="popupDetailBody" param={event} as="span" />
	</span>
	</div>
	)}

and I suggest you store any extra values in the raw property of the event object. It's an escape hatch for storing anything except properties we offer.

https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/event-object.md#the-structure-of-eventobject

const yourEventObject = {
  id,
  title,
  // ...
  body: 'use-popupDetailBody' // any string except empty one.
  raw: {
    lead: '???'
  }
};

Then you can now use the popupDetailBody template function as you want.

const calendarOptions = {
  // ...
  template: {
    popupDetailBody(eventObject) {
      const lead = eventObject.raw.lead;

      return `Lead: ${lead}`; // or HTML string
    }
  }
};

Example: https://playcode.io/961691