Как добавить элемент для отображения большего количества текста в полном календаре с помощью React js? - PullRequest
Новая
       15

Как добавить элемент для отображения большего количества текста в полном календаре с помощью React js?

0 голосов
/ 13 мая 2019

Я пытаюсь внедрить полный календарь в проект приложения React JS. То, что я хочу сделать, это не просто отображать заголовок, я также хочу, чтобы событие отображало описание.

Я видел ранее заданный вопрос Показать больше текста в полном календаре , который имеет ответ с использованием jquery (2-й ответ), который был 

$(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' календарь работает нормально, но мне просто нужно, чтобы это немного заработало, я, вероятно, упускаю что-то действительно очевидное, но я смотрел и пробовал разные вещи и ничего не добился. Надеюсь, кто-нибудь посоветует, как мне это сделать.

UPDATE На основании вашего ответа я попробовал это, но это не работает. Можете ли вы оказать дополнительную помощь? Я ценю его. 

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;

1 Ответ

0 голосов
/ 13 мая 2019

Вы можете сделать что-то подобное и передать компонент в 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} />
...