Popover Mechanism on Events.

Check that this is really a bug

• I confirm

Reproduction link

https://replit.com/@Canopix/react-big-calendar-popover#src/mockedEvents.js

Bug description

Hello Everyone!

I’m trying to create a Calendar with popovers in events like the following example (that calendar was created with react-big-calendar) by people from @Toggl.

In my case, I created a new EventWrapper for the events and passed it in the components prop in Calendar. You can see it here:

https://replit.com/@Canopix/react-big-calendar-popover

The main issue here is that my EventWrapper component is not in the same position as my event.

This is the code of my EventWrapper

<div
      id="custom-wrapper"
      {...{
        ...props,
        // style: { ...style, top: `${style.top}%`, position: 'absolute' },
      }}
    >
      <Popover>
        <PopoverTrigger>
          <div>{props.children}</div>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverBody>
            Are you sure you want to have that milkshake?
          </PopoverBody>
        </PopoverContent>
      </Popover>
    </div>

The style is commented to show the bug if I put the style attribute as position absolute and the top with %. The result is the following.

But I lost the ability to resize the events, and the events are too small. The popover is working.

Now, I’m not know how to face this issue. Is there a good guide to creating popovers on events?

Thanks to all!

Expected Behavior

Custom Wrapper should be in the right place and not lose the ability to resize the events.

Actual Behavior

I described above.

react-big-calendar version

^1.5.0

React version

^16.12.0

Platform/Target and Browser Versions

MacOs Chrome

Validations

• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I’m willing to open a PR

[cutterbl]

Thank You @salao-na-mao. For other’s trying to figure this out, please reference the comment above.

[salao-na-mao-developer]

This works for me: https://github.com/jquense/react-big-calendar/issues/1217#issuecomment-502370452