时间戳

首页 > 解决方案 > 如何使用 React js 附加元素以在完整日历事件中显示更多文本？

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

问题描述

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

我看到了一个先前提出的问题Display more Text in fullcalendar有一个答案使用 jquery (2nd answer) 这是

$(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;

标签： reactjsfullcalendarfullcalendar-4

解决方案

你可以做这样的事情并将一个组件传递给 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} />

推荐阅读