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>

正在react中尝试这个demo，但它在react版本中不起作用。

但是工具提示不起作用

Fullcalendar 反应示例项目 示例项目反应 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

的工具提示

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

  }

或

使用react-tooltip

import ReactTooltip from 'react-tooltip'

以及处理方法

eventPosition

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

和  

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

      }

Answer 3

使用 tippy 和 eventMouseEnter

的工具提示

    handleMouseEnter = (arg) =>{
    tippy(arg.el, {
        content: "my tooltip!"
    });
}

在组件中

render() {
    return (
            <FullCalendar ref={this.calendarRef}
                          plugins={[dayGridPlugin, interactionPlugin]}
                          initialView="dayGridMonth"
                          weekends={true}
                          eventMouseEnter={this.handleMouseEnter}

            />
    )
}

Answer 4

迄今为止我做得最好的。这至少会给一个事件一个标题。

<FullCalendar eventDidMount={renderEventContent} .....

function renderEventContent(info) {
  info.el.setAttribute('title', info.event.title)
}

Answer 5

MUI 工具提示 + fullcalendar v5 + Typescript

受到@user-rebo的启发，这里有一个关于如何在

fullcalendar

中自定义事件渲染的TypeScript解释。

fullcalendar

的默认事件渲染方法是

renderInnerContent

。您可以在

fullcalendar

GitHub 存储库中找到此方法：FullCalendar StandardEvent.tsx - renderInnerContent

由于

fullcalendar

不直接导出此方法，因此您需要将

renderInnerContent

方法复制到您的项目中。这使您可以根据需要对其进行自定义。

function renderInnerContent(innerProps: EventContentArg) {
  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>
  )
}

在您的

renderCustomEventContent

配置中使用自定义

fullcalendar

方法。以下是如何将其集成到 FullCalendar 设置中的示例：

const renderCustomEventContent = (eventInfo: EventContentArg) => (
  <Tooltip title="My custom tooltip title" arrow placement="top">
     { renderInnerContent(eventInfo )}
  </Tooltip>
);

要为自定义视图添加工具提示，请包含事件的自定义呈现，如下所示：

views={{
  resourceTimeGridSevenDays: {
    ...,
    eventContent: renderCustomEventContent,
  }
}}

如果您想为所有视图覆盖此设置，只需直接在 FullCalendar 中使用 eventContent 方法即可。

<Calendar
  ...
  eventContent={renderCustomEventContent}
/>

结果：