React Fullcalendar v4 工具提示

Question

Fullcalendar React 组件：

import FullCalendar from "@fullcalendar/react";
import timeGrid from "@fullcalendar/resource-timegrid";
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';

class FC extends React.Component {
  calendarComponentRef = React.createRef();

  constructor(props) {
    super(props);    
    this.state = {
        events:[{ "id": 1, "title": "event 1", "description":"some description"},......]
    }  
  }

  eventRender(info){
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.description,
      placement: 'top',
      trigger: 'hover',
      container: 'body'
    });
  }

  render() {
    return <FullCalendar                  
          events={this.state.getEvents}          
          defaultView="resourceTimeGridDay"
      plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}
          eventRender={this.eventRender}
          schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
        />

  }
}

标题中包含的 Tooltip.js

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script rc="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js">/script>

正是在反应中尝试这个演示，但它在反应版本中不起作用。

但工具提示不起作用

Fullcalendar react 示例项目示例项目 react fullcalendar

Answer 1

全日历 v5

使用内容注入钩子，例如Material-ui 工具提示：

eventContent: ( arg ) => {
    return (
        <Tooltip title={ <Typography color="inherit">Tooltip with HTML</Typography> } arrow>
            { renderInnerContent( arg ) }
        </Tooltip>
    );
}

如果您希望与默认内容完全相同，请从 fullcalendar 源复制该函数：

/**
 * https://github.com/fullcalendar/fullcalendar/blob/495d925436e533db2fd591e09a0c887adca77053/packages/common/src/common/StandardEvent.tsx#L79
 */
function renderInnerContent( innerProps ) {
    return (
        <div className='fc-event-main-frame'>
            { innerProps.timeText &&
            <div className='fc-event-time'>{ innerProps.timeText }</div>
            }
            <div className='fc-event-title-container'>
                <div className='fc-event-title fc-sticky'>
                    { innerProps.event.title || <Fragment>&nbsp;</Fragment> }
                </div>
            </div>
        </div>
    );
}

要将ListView内容与默认内容区分开来，您可以使用此代码（给定日历参考calendarRef）：

eventContent: ( arg ) => {
    const data = calendarRef.current.getApi().getCurrentData();
    const viewSpec = data.viewSpecs[arg.view.type];
    let innerContent;
    if (viewSpec.component === ListView) {
        /**
         * https://github.com/fullcalendar/fullcalendar/blob/495d925436e533db2fd591e09a0c887adca77053/packages/list/src/ListViewEventRow.tsx#L55
         */
        innerContent = renderListInnerContent( arg );
    } else {
        innerContent = renderInnerContent( arg );
    }
    return ( <Tooltip ... >{ innerContent }</Tooltip>);
};

Answer 2

工具提示使用Tooltip.js

\n\n

eventRender(info){\n    var tooltip = new Tooltip(info.el, {\n      title: info.event.extendedProps.description,\n      placement: \'top\',\n      trigger: \'hover\',\n      container: \'body\'\n    });\n  }\n

\n\n

在组件中：

\n\n

render() {\n    return <FullCalendar                  \n          events={this.state.getEvents}          \n          defaultView="resourceTimeGridDay"\n      plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}\n          eventRender={this.eventRender}\n          schedulerLicenseKey="GPL-My-Project-Is-Open-Source"\n        />\n\n  }\n

\n\n

或者

\n\n

使用反应工具提示

\n\n

import ReactTooltip from \'react-tooltip\'\n

\n\n

以及处理方法eventPosition

\n\n

handleEventPositioned(info) {\n  info.el.setAttribute("data-tip","some text tip");\n   ReactTooltip.rebuild();\n }\n

\n\n

和\n\xc2\xa0

\n\n

render() {\n        return <FullCalendar                  \n              events={this.state.getEvents}          \n              defaultView="resourceTimeGridDay"\n          plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}\n              eventPositioned={this.handleEventPositioned}\n              schedulerLicenseKey="GPL-My-Project-Is-Open-Source"\n            />\n\n      }\n

\n