React Fullcalendar v4工具提示
React Fullcalendar v4工具提示
提问于 2019-07-25 12:18:35
全日历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版本中不起作用。
但工具提示不起作用
完整日历react示例项目sample project react fullcalendar
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-07-30 15:30:20
使用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"
/>
}或者
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"
/>
}Stack Overflow用户
发布于 2020-07-28 22:00:48
FullCalendar v5
使用content injection hook，例如用于Material-ui tooltip
eventContent: ( arg ) => {
return (
<Tooltip title={ <Typography color="inherit">Tooltip with HTML</Typography> } arrow>
{ renderInnerContent( arg ) }
</Tooltip>
);
}如果您想拥有与默认内容完全相同的内容，请从完整的日历源中复制该函数：
/**
* 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> </Fragment> }
</div>
</div>
</div>
);
}为了区分ListView内容和默认内容，您可以使用以下代码(给定一个Calendar reference 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>);
};Stack Overflow用户
发布于 2021-01-09 20:15:42
工具提示结合使用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}
/>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57194259
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号