Problem when try to open custom menu when cilcked on event

eeefg650 commented 1 year ago

Check that this is really a bug

[X] I confirm

Reproduction link

https://stackblitz.com/edit/big-calendar-demo-xhn2qf?file=package.json

Bug description

I'm trying to add a dropdown menu when an event is clicked, but the problem is that the menu opens inside the element of the event instead of outside the element event.

i was add pic of the code + output. Hope I was clear.

I would be very happy to help!

Expected Behavior

No response

Actual Behavior

No response

react-big-calendar version

1.5.2

React version

18.2.0

Platform/Target and Browser Versions

chrome

Validations

[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
[x] 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

bu6n commented 1 year ago

An image is not a reproduction link :) Difficult to know what's happening without the code. Also, this doesn't look like a bug, more like a question of how to do something. Maybe better ask in the Slack group (see link in README)

eeefg650 commented 1 year ago

An image is not a reproduction link :) Difficult to know what's happening without the code. Also, this doesn't look like a bug, more like a question of how to do something. Maybe better ask in the Slack group (see link in README)

You right. Here is my code : https://stackblitz.com/edit/big-calendar-demo-xhn2qf?file=package.json

And thanks i'll try to ask there either. But if you can take a look i would really appreciate that.

dangzan commented 1 year ago

@eeefg650 I think you needed to create an EventWrapper component and assign it to the eventWrapper property of the Calendar's components prop.

          <Calendar
            ...
            components={{ event: Event, eventWrapper: EventWrapper }}
            ...
          />

You can then move your menu from the Event component to the EventWrapper component. The eventWrapper helps you customize how the event is rendered and add sibling components. Here's the new EventWrapper and Event:

function EventWrapper({ event, children }) {
  const [showMenu, setShowMenu] = useState(false);

  return (
    <div onClick={() => setShowMenu(!showMenu)}>
      {children}
      <Menu
        shadow="md"
        width={200}
        opened={showMenu}
        trigger="click"
        position="bottom"
        withArrow
        id="test"
      >
        <Menu.Dropdown>
          <Menu.Label>Application</Menu.Label>
          <Menu.Item>Settings</Menu.Item>
          <Menu.Item>Messages</Menu.Item>
          <Menu.Item>Gallery</Menu.Item>
          <Menu.Item
            rightSection={
              <Text size="xs" color="dimmed">
                ⌘K
              </Text>
            }
          >
            Search
          </Menu.Item>
          <Menu.Divider />
          <Menu.Label>Danger zone</Menu.Label>
          <Menu.Item>Transfer my data</Menu.Item>
          <Menu.Item color="red">Delete my account</Menu.Item>
        </Menu.Dropdown>
      </Menu>
    </div>
  );
}

function Event(event) {
  return (
    <>
      <div>
        <span>{event.title}</span> // should to click on the title event for
        open the menu
      </div>
    </>
  );
}

Here's the modified code: https://stackblitz.com/edit/big-calendar-demo-w4pxip?file=index.js You will still need to position the menu, but I think this addresses your issue. @bu6n I hope it's okay to post here. Wasn't sure since, like you said, it isn't actually a bug. Will post in the Slack too.

jquense / react-big-calendar