[英]React Fullcalendar v4 tooltip
Fullcalendar React component: 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 included in header标题中包含的 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>
Exactly trying to this demo in react, but it is not working in react version.在反应中完全尝试这个演示,但它在反应版本中不起作用。
But tooltip not working但工具提示不起作用
Fullcalendar react example project sample project react fullcalendar Fullcalendar react 示例项目示例项目 react fullcalendar
With content injection hook eg for Material-ui tooltip :使用内容注入钩子,例如Material-ui 工具提示:
eventContent: ( arg ) => {
return (
<Tooltip title={ <Typography color="inherit">Tooltip with HTML</Typography> } arrow>
{ renderInnerContent( arg ) }
</Tooltip>
);
}
If you want to have the exact same content as the default, then copy the function from fullcalendar source:如果您希望与默认内容完全相同,请从 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> </Fragment> }
</div>
</div>
</div>
);
}
To differentiate ListView
content from default content you can use this code (given a Calendar reference calendarRef):要将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>);
};
Tooltip using Tooltip.js
使用Tooltip.js
工具提示
eventRender(info){
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
In component :在组件中:
render() {
return <FullCalendar
events={this.state.getEvents}
defaultView="resourceTimeGridDay"
plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}
eventRender={this.eventRender}
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
/>
}
OR或者
using react-tooltip使用反应工具提示
import ReactTooltip from 'react-tooltip'
and method to handle eventPosition
和处理eventPosition
方法
handleEventPositioned(info) {
info.el.setAttribute("data-tip","some text tip");
ReactTooltip.rebuild();
}
and和
render() {
return <FullCalendar
events={this.state.getEvents}
defaultView="resourceTimeGridDay"
plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}
eventPositioned={this.handleEventPositioned}
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
/>
}
Tooltip using tippy with eventMouseEnter使用带有 eventMouseEnter 的tippy 的工具提示
handleMouseEnter = (arg) =>{
tippy(arg.el, {
content: "my tooltip!"
});
}
in component在组件中
render() {
return (
<FullCalendar ref={this.calendarRef}
plugins={[dayGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
weekends={true}
eventMouseEnter={this.handleMouseEnter}
/>
)
}
Best I did so far.迄今为止我做的最好的。 This will at least give a title to an event.这至少会给一个事件一个标题。
<FullCalendar eventDidMount={renderEventContent} .....
function renderEventContent(info) {
info.el.setAttribute('title', info.event.title)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.