Ability to return a react element in eventRender function

[jonlachlan]

I'd like to be able to return a JSX-style react element in the eventRender function, like in the customEventRender method in this CodePen:
https://codesandbox.io/embed/p7kyyr14ym

If I try this now I get TypeError: can't define property "fcSeg": Object is not extensible.

Let me know if I need to provide more info to describe this.

[joshuaRuff]

Because info.el is more than a simple JSX element you can't just replace all of that. However there are some ways you can edit info.el to your liking:

• Add a custom class name to the class string

customEventRender = info => {
    // edit the parent's class
    info.el.className = "custom-event-container fc-day-grid-event fc-h-event fc-event fc-start fc-end"
    // edit the child's class
    info.el.children[0].className = "custom-event-container fc-content"
    return info.el
  };

• Change Child Content

customEventRender = info => {
    info.el.firstChild.innerText = "Text Overwrite"
    return info.el
  };

Let me know if there is a certain part of the element you are trying to change and if this info is helpful.

[jonlachlan]

Thank you, this is exactly what I wanted to know.

[arshaw]

I'm reopening this up because it might be a nice API to allow for returning a JSX element.

I've been thinking about this recently because it came up in the Vue repo (fullcalendar/fullcalendar-vue#14)

[jonlachlan]

FYI, it seems that in my codepen I should not have been trying to return a React element that wraps info.el, but rather one that wraps or includes something from the info.event object. In any case, I think the question was understood, whether eventRender looks for a React element to be returned.

One possible use-case that I was thinking of was to create/use a tooltip component, such as how Antd does their Popover component, as an alternative to using Tooltip.js as described in the Fullcalendar docs.

[stclairdaniel]

I would love it if this could let us just return arbitrary JSX - it would make things far easier to customize.

[tgandee79]

Below seems works for React rendering.

When I use eventRender at all and edit the info.el, the table cell sizing doesn't match. Screenshot below.

            eventRender={(info) => {
                render(
                    <div className="fc-content">
                        <span className="fc-title">{info.event.title}</span>
                    </div>,
                    info.el,
                );
                return info.el
            }}

all events are suppose to be on the 29th
with eventRender fn

without eventRender fn

[jonlachlan]

One note, my initial codepen suggested that eventRender currently expects to return info.el, which was a misunderstanding on my part, and other examples here have repeated that pattern. In reality you modify info.el directly and return nothing.

[RachelScodes]

Any update on this? Especially as the convention is to use more functional components in react... Looks like the corresponding vue issue was closed without resolution.

[Daniel-Griffiths]

I get the same issue as @tgandee79, Using the ReactDOM.render works but causes the table cell size to be incorrectly calculated

[Daniel-Griffiths]

A temporary fix I found was to force the row height to be automatic, eg:

.fc-body .fc-row {
    height: auto !important;
}

This overwrites the inline styles that full calendar adds.

[arshaw]

If you're curious to know, this will be included in v5 (currently in-development)
blog post: https://fullcalendar.io/blog/2020/02/changes-in-the-upcoming-v5

[stclairdaniel]

@arshaw Very cool! I'm looking forward to upgrading.

[Aveesha]

I picked up on advise on this thread and did something like this -

eventRender={(info) => {
const image = document.createElement('span');
const status = info.event.extendedProps.status.toLowerCase();
image.setAttribute('class',`icon-position-${status}`);
info.el.append(image);
}}

The colors listed out in the CSS appear muted/dull. I've used the same green color (#0acf4b) on FullCalendar vs another custom React Component, but the opacity levels seem to be very different? Is there anything I can do to preserve the opacity/vibrancy?

Green on the side bar.

Green on the dot/circle icon on March 5th box.

[kdoroszewicz]

Just a heads up for anyone trying to use ReactDOM.render to return React Component for calendar event. By default the created ReactDOM tree is not removed which lead to choppy interactions with events in my case. You should add eventDestroy handler like this:

eventRender:

eventRender={info => {
          ReactDOM.render(
            <Event></Event>,
            info.el.querySelector(".fc-content")
          );
          return info.el;
        }}

eventDestory:

eventDestroy={info =>
          ReactDOM.unmountComponentAtNode(info.el.querySelector(".fc-content"));
        }}

[arshaw]

this is available in the latest v5-beta

here's an example using the new eventContent setting:
https://github.com/fullcalendar/fullcalendar-example-projects/blob/v5/react/src/DemoApp.jsx#L38

[arshaw]

vdom nodes are accepted in many places, not just for events. please see all the *Content settings in the upgrade guide: https://fullcalendar.io/docs/v5/upgrading-from-v4

[leesh22]

Also having the same issue as @tgandee79 but with the resourceTimelinePlugin. The calendar cells are not adjusting to the event size on the first render, using the 5.0.0-beta.2 function eventContent.

Is there a fix/solution for this yet?

[arshaw]

Hey @leesh22 , could you post a runnable, stripped-down demonstration of the bug? also, maybe try v5.0.0-beta.3. i fixed a number of event positioning bugs in that release

[leesh22]

@arshaw Ah I didn't realise there was a beta.3 - that update fixed the issue :) - thanks for the speedy response!

[Gustl22]

What strategy do I have to use to wrap existing content with a React component e.g. with MUI Tooltip? I posted this solution, but then I noticed that it doesn't fit for different view types, e.g. listMonth. Can I somehow access the original eventContent element?
EDIT: I added a solution, which works, but it cannot resuse existing inner content elements.

[arshaw]

Sorry, I never updated this ticket. This is now possible in v5:
https://fullcalendar.io/docs/react#content-injection

@Gustl22 the eventDidMount hook is likely what you need

[Gustl22]

@arshaw Unlike Tooltip.js I cannot attach the tooltip to a rendered element. The content must be wrapped inside the MUI Tooltip before rendering:

<Tooltip title="Tooltip">
  <Content>Arrow</Content>
</Tooltip>

Whereas Content has to be the original eventContent dependent on the view (month / list etc.). Then I return the Element via eventContent.
Any ideas? Thank you ;)

[nkemcels]

This issue is still there

[bahachammakhi]

@Gustl22 same problem here I used eventContent hook todo that but still can't accesss the wrapper

[Gustl22]

@bahachammakhi I opened an issue for that, you can see, like and comment your opinion there fullcalendar/fullcalendar#5927 and try reproduce the examples Thank you! 🙏