Reactjs 如何使用React js在完整日历事件中添加元素以显示更多文本？

我正在尝试在React JS应用程序项目中实现完整日历。我想做的不仅仅是显示标题，我还想让事件显示描述

我看到一个以前问过的问题，它的答案是使用jquery（第二个答案），这是

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
        events: 
            [ 
                { 
                    id: 1, 
                    title: First Event', 
                    start: ......., 
                    end: ....., 
                    description: 'first description' 
                }, 
                { 
                    id: 2, 
                    title: 'Second Event', 
                    start: ......., 
                    end: ....., 
                    description: 'second description'
                }
            ], 
        eventRender: function(event, element) { 
            element.find('.fc-title').append("<br/>" + event.description); 
        } 
    });
} 

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar（{
活动：
[ 
{ 
id:1，
标题：第一个事件“，
开始：。。。。。。。，
完:。。。。。，
描述：“第一个描述”
}, 
{ 
id:2，
标题：“第二个事件”，
开始：。。。。。。。，
完:。。。。。，
描述：“第二描述”
}
], 
eventRender:函数（事件，元素）{
元素。查找（'.fc title'）。追加（“
”+事件。说明）；
} 
});
} 

我试图用我的代码内联更改该选项：

如果没有“eventRender”，日历可以正常工作，但我只需要让它工作一点点，我可能错过了一些非常明显的东西，但我一直在尝试不同的东西，却一无所获。希望有人能建议我怎么做

更新 根据你的回答，我试过了，但是没有用。你能提供进一步的帮助吗？我很感激

class Calendar extends React.Component {

    render() {
        return (
            <div id="calendar" class="container" ref="calendar">
                <FullCalendar
                    selectable={true}
                    defaultView="dayGridMonth"
                    height={650}
                    aspectRatio={2}
                    plugins={[interaction, dayGridPlugin, bootstrapPlugin]}
                    themeSystem="bootstrap"
                    weekends={false}
                    displayEventTime={true}
                    timeZone="UTC"
                    events={[
                        { title: 'Early Bird Registration Deadline', description: 'asdasd', date: '2019-05-13' },
                        { title: 'event 2', description: 'asdasdasd', date: '2019-04-02' }
                    ]}
                    eventRender={this.EventDetail}                        
                />
            </div>
        )
    }
    EventDetail = ({ event, el }) => {
        const content = <div>{event.title}<div>{event.description}</div></div>;
        ReactDOM.render(content, el);
        return el;
      };
}
export default Calendar;

类日历扩展React.Component{
render（）{
返回(
)
}
EventDetail=（{event，el}）=>{
const content={event.title}{event.description}；
ReactDOM.render（内容，el）；
返回el；
};
}
导出默认日历；

您可以执行类似操作，并将组件传递给eventRender道具

import React from 'react';
import ReactDOM from 'react-dom';
import FullCalendar from '@fullcalendar/react';

const EventDetail = ({ event, el }) => {
  const content = <div>{event.title}<div>{event.description}</div></div>;
  ReactDOM.render(content, el);
  return el;
};

<FullCalendar eventRender={EventDetail} />

从“React”导入React；
从“react dom”导入react dom；
从“@FullCalendar/react”导入FullCalendar；
const EventDetail=（{event，el}）=>{
const content={event.title}{event.description}；
ReactDOM.render（内容，el）；
返回el；
};

根据FullCalendar v5中针对React的最新文档，您可以使用

eventContent

功能自定义事件的呈现方式

<FullCalendar eventContent={renderEventContent} />

 const renderEventContent = (eventInfo) => {
     return (
            <>
              <b>{eventInfo.timeText}</b>
              <p><i>{eventInfo.event.title}</i></p>
            </>
     )
 };

const renderEventContent=（事件信息）=>{
返回(
{eventInfo.timeText}
{eventInfo.event.title}

)
};

您已将其标记为fullCalendar-4…但fullCalendar 4不使用jQuery，因此1）除非您在页面中单独包含jQuery，否则此代码将崩溃，2）

元素无论如何都不会是jQuery对象。3） 即使在v3中，回调的第一个参数是
事件
，而不是
元素
。4） 同样在版本4中，提供了一个
info
对象作为回调中传递的参数。元素是其中的一个子属性，是DOM元素，而不是jQuery对象。您在尝试运行此操作时是否检查了控制台错误？您可能会发现解决此问题更有帮助。（它仍然使用jQuery，但请注意他们是如何找到主对象的
.el
属性的，然后在尝试处理它之前将其显式包装到jQuery对象中的）这似乎假设为for eventRender，但问题被标记为具有。您可能需要稍微修改您的答案。@ADyson这实际上使用的是v4签名。如果你注意到我正在通过一个物体。const EventDetail=（{event，el}）=>{event.title}与const EventDetail=（info）=>{info.event.title}相同，而不是传递整个信息对象，我只传递渲染中需要的属性，即事件和元素。@Michael我已更新了我的问题以显示我的当前代码，不幸的是，这不起作用。它只是将日历呈现为正常状态，如果我将const添加到事件详细信息中，则会出现错误。@Dean我为您在codesandbox上创建了一个快速演示。我不确定这是否是最好的解决方案，特别是因为尺寸，但这是一个解决方案。我目前正在做一些类似的事情，所以如果我想出或遇到一个更好的选择，我会把它贴在这里。
<FullCalendar eventContent={renderEventContent} />

 const renderEventContent = (eventInfo) => {
     return (
            <>
              <b>{eventInfo.timeText}</b>
              <p><i>{eventInfo.event.title}</i></p>
            </>
     )
 };