如何在 react-calendar-timeline 中添加自定义弹出窗口

Question

我正在使用 react-calendar-timeline(https://www.npmjs.com/package/react-calendar-timeline)。我需要添加一个自定义弹出窗口，其中包含所有详细信息和更新它的表单。我可以在其中传递渲染方法的任何道具？

Answer 1

查看react-calendar-timeline open issues后，我知道它不支持自定义的popover来显示额外的数据。但是有一种解决方法可以实现同样的效果，那就是 itemRenderer。

这是骨架。将以下代码放在单独的组件中。

<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>

并传入Timeline的itemRenderer属性中。

这对我有用。 P.S 通过每个资源项的唯一 ID 单独处理模式

谢谢

如何在 react-calendar-timeline 中添加自定义弹出窗口

How to add custom popover in react-calendar-timeline

timeline

calendar

typescript

reactjs