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

Question

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

我看到了一个以前问过的问题 Display more Text in fullcalendar，它的答案是 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); 
        } 
    });
}

我试图用我的代码更改它：

      <div id="calendar" class="container">
        <FullCalendar
        defaultView="dayGridMonth"
        height={650}
        aspectRatio={2}
        plugins={[dayGridPlugin]}
        themeSystem='bootstrap4'
        weekends={false}
        events={[
          { title: 'event1', description: 'Test data', date: '2019-05-13' },
          { title: 'event 2', date: '2019-04-02' }
        ]}
        eventRender={
            function(element) 
            { 
                element.find('.fc-title').append("<br/>" + "asdasd");}
        }
        />      
        </div>

没有 '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;

Answer 1

您可以像这样将组件传递给 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} />

Answer 2

  eventRender={(info) => {
        if (condition) {
          const image = document.createElement('span'); // or any other element
          image.setAttribute(class, 'customCSSClass');
          info.el.append(image);
        }
      }}

Answer 3

根据 FullCalendar v5 for React 中的最新文档，您可以使用 eventContent 自定义事件呈现的功能。

<FullCalendar eventContent={renderEventContent} />

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

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

How to append an element to display more text in full calendar event with React js?

reactjs

fullcalendar

fullcalendar-4