Extended Properties

[jnegron357]

Is there a mechanism for displaying properties from the extendedProps field? I have several fields that need to be included for my app.

[vkurko]

Please, take a look at the eventContent option.

[jnegron357]

Thanks for the reply, but I don't fully understand. The documentation does not tell me how to apply the content to a specific event. For example, I want to add a description field to be displayed. How do I use eventContent to achieve this? Is there a repository of examples that we can reference? That would really help.

Update: I tried adding an event using the extendedProps with HTML:

{
    id: 50, title: "My awesome event", start: '2023-04-20 13:00', end: '2023-04-20 16:00', resourceId: 1, display: 'auto', editble: 'true', color: 'green', 
    extendedProps:
    {
        eventContent: { html: "<h2>my custom content</h2>" }
     }
}

But I didnt see the new content.

[jnegron357]

As a workaround, I've created a function that will use the titleHTML event field to inject additional content from the model:

function updateEvent(id,content) {
    var event = ec.getEventById(id)
    event.titleHTML = content ?? `<div>${event.titleHTML}</div><div>My Description</div><div>FY23 Campaign</div>`
    ec.updateEvent(event)
}

The default content is for testing purposes. Hope this helps others with the same need.

[vkurko]

I prepared a demo that uses eventContent which returns a list of DOM elements (divs) that are then rendered inside the event. The last div contains the data from extendedProps.

[jnegron357]

The demo code works well, but it generates an error when hovering over other dates and times. I added an issue with a screenshot.

[vkurko]

I don't see any errors in demo. Note that eventContent works for absolutely all events, including background events and helper events that are rendered when drag&drop or pointer is enabled. If you are using the specified events, then the eventContent needs to take into account each of them by checking the display field of the event.