Resource rows don't adjust height to fit resourceLaneContent

[tkgwheeler]

Reduced Test Case

REDUCED TEST CASE

Bug Description

The lane height calculation is not taking your custom content into account when you use the resourceLaneContent hook. In my case I'm trying to display custom content (per resource) on the timeline above the events.

Expected results

The resource lane height (in the resource area and timeline section) would take the height of this new custom content into account.

Actual results

The height of your custom content is not taken into account, and therefore it's highly likely that your events will begin to overlap the lanes

[acerix]

Thanks, confirmed. Also get the same without React:

https://codepen.io/acerix/pen/yLadWXQ?editors=001

[arshaw]

I suppose I didn't think through all the implications of resourceLaneContent before implementing it. Can I ask for more info about your usecase @tkgwheeler ? For the content you're injecting, are you hoping it goes behind each row's events, above each row's events, or below each row's events?

[airzhanglin]

Reduced Test Case

REDUCED TEST CASE

Bug Description

The lane height calculation is not taking your custom content into account when you use the resourceLaneContent hook. In my case I'm trying to display custom content (per resource) on the timeline above the events.

Expected results

The resource lane height (in the resource area and timeline section) would take the height of this new custom content into account.

Actual results

The height of your custom content is not taken into account, and therefore it's highly likely that your events will begin to overlap the lanes

Hello, I would like to ask why you added the custom content of Test. This content will only appear in the 12AM column, and the custom content will not be added after 12AM

[ecnaidar]

Hi, I am not sure if that is the same issue but I was looking for existing open issues with Resource height and found it. We only use custom content inside of event harness provided by eventContent lifecycle hook and there is issues when changing view e.g. in example switching between week and month.

It does not seem to be adjusting resource height correctly and keeps previous value. If window size is changed everything resizes to correct heights and no overlapping occurs.

I tried forcing calendar.updateSize() within different view/event lifecycle hooks but to no avail.

https://user-images.githubusercontent.com/10078339/159556513-ccb81c3a-9209-42cc-be45-3e86ab1f9dea.mov

[showduhtung]

I am also facing this issue, when transitioning from view to view, it seems to default the resourceLane height to something default, but if I maneuver the calendar slightly like scrolling, (possibly creating a rerender somewhere), it adjusts but that's not a user behavior that's acceptable to me.

      eventContent={({ event }) => {
          const { title, extendedProps } = event;
          return (
            <>
              <Text fw="bold">{title}</Text>
              <Text>{extendedProps.description}</Text>
            </>
          );
        }}

@ecnaidar were you able to solve this issue?

[ecnaidar]

Hey @showduhtung, saw you post during vacation and just now remembered that I haven't replied 😬

Yeah, we had a back and forth with FullCalendar support with attempts of reproducing it and it seemed that I have found a fix at the time

After quite a long time fiddling with that bug, I have figured it out. It is some weird behaviour when both 'resources' and 'events' arrays and objects are updated simultaneously. In the actual project those were reconstructed in a single 'useMemo' after a new date range was set and data was fetched. I have moved out 'resources' and the bug has disappeared. Tried replicating that in CodeSandbox so that it could be troubleshooted further but wasn't able to do it.

[AngelZacarias]

I'm facing the same issue than @ecnaidar, is there some workaround or is it related with this resourceLaneContent issue? 🤔

[arshaw]

I've addressed this in v7.0.0-beta.0

Updated (vanilla-js only) repro: https://codepen.io/arshaw/pen/dyxGZKW?editors=0010

Will work with the beta version of @fullcalendar/react