2

I'm using react big calendar and trying to make a popover when the user clicks any event. The issue is the popover is not showing in the correct position (the correct position will be the event where it was clicked). I think it causes the re-rendering issue or the popover can't able to get the selected event position.

kinda confused about how to solve this problem.

I'm attaching the relevant code for reference.

Code

import React, { useEffect, useState, useRef } from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';

const now = new Date();
const { Panel } = Collapse;
const localizer = momentLocalizer(moment)


const { confirm } = Modal;

function CalendarNew() {
const [anchorEl, setAnchorEl] = React.useState(null);

    const handlePopover = (event, target) => {
        console.log('popover clicked', target)

        setAnchorEl(1);
    };

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

    const open = Boolean(anchorEl);
    const id = open ? 'popover-trigger-click-root-close' : undefined;
 return (
<div>

 <Calendar
                views={['month']}
                popup={true}
                localizer={localizer}
                events={isEvents}
                style={{ height: 720 }}
                selectable={true}
                onSelectEvent={handlePopover}
                
            />


  <Popover
                style={{ opacity: 1 }}
                id={id}
                open={open}
                anchorEl={anchorEl}
                onClose={closePopover}
                transformOrigin={{ horizontal: 636, vertical: 879 }}
           
            >
                <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
 </Popover>

</div>

    )
}
export default CalendarNew;

Screenshot

In the screenshot the popover should show in the event but showing in the top left corner.

enter image description here

Sharanjeet Singh
  • 75
  • 13

1 Answers1

0

It's because you set anchorEl to 1.

You need to set this anchorEl to a dom element, please read docs: https://mui.com/components/popover/#main-content

In the documentation of react-big-calendar prop-onSelectEvent you see that the SyntheticEvent is the second argument. Try to log it and get the currentTarget (or the currentElement dom).

So you just replace your function to this:

    const handlePopover = (_, event) => {
        // NO: setAnchorEl(1)
        setAnchorEl(event.currentTarget);
    };
Melvynx
  • 912
  • 1
  • 6
  • 20