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={(info) => {
        if (condition) {
          const image = document.createElement('span'); // or any other element
          image.setAttribute(class, 'customCSSClass');
          info.el.append(image);
        }
      }}

Answer 2

根据适用于React的FullCalendar v5中的最新文档，您可以使用eventContent函数自定义事件的呈现方式。

<FullCalendar eventContent={renderEventContent} />

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

Answer 3

您可以执行以下操作，并将组件传递给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 js附加元素以在完整日历事件中显示更多文本？

3 个答案: