Rendering a custom popover

Feature – I have enable isSelectable in my calendar, but want to have the user select a few timeslots and have a popup menu being rendered after they have selected. Essentially, I want to render a react component after onSelectSlot is called. Is there any way to do this?

The only thing i can think of right now is injecting something in the DOM when onSelectSlot is called but I can’t take advantage of react then. I don’t see a react class i can override in components for this either.

Does anyone have any suggestions?

[arecvlohe]

I am closing this for now since the original poster is not active. Thanks @joshuawootonn for your response!

[Bielik20]

I stumbled opon this issue trying to figure out correct way of introducing popovers to calendar (quite common use case). I ended up doing it like that:

export function EventPopoverWrapper({ children, popover }: Props): any {
  const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <>
      <div aria-describedby={id} onClick={handleClick}>
        {children}
      </div>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        {popover}
      </Popover>
    </>
  );
}

Then in actual calendar:

          eventWrapper: props => (
            <EventPopoverWrapper
              {...props}
              popover={
                <OffAssignmentsCalendarPopover
                  assignment={props.event}
                  userEntities={userEntities}
                />
              }
            />
          ),