How to add custom popover in react-calendar-timeline

Question

I am using react-calendar-timeline(https://www.npmjs.com/package/react-calendar-timeline). I need to add a custom popover which will have all the details and a form to update it. Any prop in which I can pass render method in it?

Answer 1

After checking react-calendar-timeline open issues, I got to know it does not support the customised popover to show additional data. But there is one workaround with which same can be achieved and that is itemRenderer.

Here is the skeleton. Put the below code in a separate component.

<div
    {...getItemProps({
      style: {
        background,             
        color,
        borderColor,
        boxShadow,
        borderStyle: "solid",
        borderWidth: 1,
        borderRadius: 4,
        borderLeftWidth: itemContext.selected ? 3 : 1,
        borderRightWidth: itemContext.selected ? 3 : 1
      }          
    })}
    onMouseEnter={() =>{
      this.setState({ showModal: true })
    }}
    onMouseLeave={() =>{
      this.setState({ showModal: false })
    }}
    onClick={() =>{
      this.setState({ showModal: false })
    }}        
  >   
    <div
      style={{
        height: itemContext.dimensions.height,
        overflow: "hidden",
        marginLeft: '10px',
        paddingLeft: 3,
        textOverflow: "ellipsis",
        lineHeight: '20px',
        marginTop: '15px'
      }}
    >
      {itemContext.title}                                     
    </div>
    {this.state.showModal &&
      <div className="itemModal" style={{
        left: left,
        right: right
      }}>
        **modal content goes here**                     
      </div>
    }  
  </div>

and pass it in itemRenderer prop of Timeline.

This worked for me. P.S Handle the modal individually by unique ID for each item of resource

Thanks