0

我正在尝试将完整日历实现到我的 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;
4

3 回答 3

5

你可以做这样的事情并将一个组件传递给 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} />
于 2019-05-13T16:14:45.503 回答
2

根据适用于 React 的 FullCalendar v5 中的最新文档，您可以eventContent自定义事件的渲染。

<FullCalendar eventContent={renderEventContent} />

 const renderEventContent = (eventInfo) => {
     return (
            <>
              <b>{eventInfo.timeText}</b>
              <p><i>{eventInfo.event.title}</i></p>
            </>
     )
 };
于 2020-11-26T16:55:25.360 回答
0 
  eventRender={(info) => {
        if (condition) {
          const image = document.createElement('span'); // or any other element
          image.setAttribute(class, 'customCSSClass');
          info.el.append(image);
        }
      }}
于 2020-02-24T22:45:03.947 回答