CODEWITHSUNDEEP
reactjstypescriptcalendartimeline
karan bhatia
karan bhatia

Reputation: 614

How to add custom popover in react-calendar-timeline

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?

Upvotes: 2

Views: 3185

Answers (2)

Yasiru Randeepa
Yasiru Randeepa

Reputation: 65

I used ant design components with react calendar timeline. We can wrap the div which we return in the itemRenderer method inside Popup Component. Here is the skeleton code for this.

<Popover
content={<Form></Form>}
trigger="onClick"
>
  <div ...props>
    {itemContext.title}
  </div>
</Popover>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>

In the content enter the form details as needed.

Upvotes: 0

karan bhatia
karan bhatia

Reputation: 614

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

Upvotes: 2

Related Questions