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

Question

I am attempting to implement Full Calendar into my React JS app project. What I want to do is rather than just display title, I also want the event to display a description.

I seen a previously asked question Display more Text in fullcalendar which has an answer using jquery (2nd answer) which was

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

I tried to change that inline with my code:

      <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>

Without the 'eventRender' the calendar works fine, but I just need to get that one little bit working, I am probably missing something really obvious but I have been staring and trying different things and getting nowhere. Hopefully someone can advise how I can do it.

UPDATE Based upon your answer I have tried this but this does not work. Can you please provide further assistance? I appreciate it.

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;

you've tagged this with fullCalendar-4...but fullCalendar 4 does not use jQuery, so 1) unless you've included jQuery separately in your page, this code will crash, 2) `element` will not be a jQuery object anyway. 3) even in v3, the first argument to the callback was `event`, not `element`. 4) Also in version 4, [eventRender](https://fullcalendar.io/docs/eventRender) provides an `info` object as the parameter passed in the callback. The element is a sub-property within it, and it's a DOM element, not a jQuery object. Did you check your console for errors when trying to run this? — ADyson, May 13 '19 at 20:22
You might find [this more recent answer](https://stackoverflow.com/a/56067933/5947043) to that question more helpful. (It does still make use of jQuery, but note how they have found the `.el` property of the main object, and then wrapped that explicitly in a jQuery object before trying to process it) — ADyson, May 13 '19 at 20:26

score 6 · Answer 1 · answered Nov 26 '20 at 16:55

As per the latest Docs in FullCalendar v5 for React, you have the eventContent function to customize your rendering for the events.

<FullCalendar eventContent={renderEventContent} />

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

score 5 · Accepted Answer · answered May 13 '19 at 16:14

5

You can do something like this and pass in a component to the eventRender prop.

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} />

answered May 13 '19 at 16:14

Michael

464
1
6
19

This appears to assume the [v3 signature](https://fullcalendar.io/docs/v3/eventRender) for eventRender, but the question is tagged with v4 which has a [different signature](https://fullcalendar.io/docs/eventRender). You may want to amend your answer slightly. – ADyson May 13 '19 at 20:29
@ADyson This is actually using the v4 signature. If you notice I am passing in an object. const EventDetail = ({ event, el }) => {event.title} is the same as const EventDetail = (info) => { info.event.title } Instead of passing the entire info object I am only passing through the properties I need in the render, which are the event and the element. – Michael May 13 '19 at 21:32
@Michael I have updated my question to show my current code, which is unfortunately not working. It just renders the calendar as normal, if I add const to event details then I get an error. – May 14 '19 at 13:54
1

@Dean I threw together a quick demo on codesandbox for you. https://codesandbox.io/s/3x2yy4x4q – Michael May 15 '19 at 15:12
I am not sure if it the best solution especially because of sizing, but it is A solution. I am currently working on something similar, so if I come up with or come across a better option, I'll post it here. – Michael May 15 '19 at 15:18
when I try to implement the way you did I get an error of `TypeError: __webpack_require__.i(...) is not a function new FullCalendar eval measureLifeCyclePerf ReactCompositeComponentWrapper._constructComponentWithoutOwner ReactCompositeComponentWrapper._constructComponent ReactCompositeComponentWrapper.mountComponent Object.mountComponent ReactDOMComponent.mountChildren ReactDOMComponent._createInitialChildren ReactDOMComponent.mountComponent ` How can I remove this Error? – Ram Budha May 28 '19 at 16:12
@ZNYAKKAYAZ If you create a code sandbox, I can take a look. Unfortunately the above error doesn't offer enough context. – Michael May 29 '19 at 17:31

score 0 · Answer 3 · answered Feb 24 '20 at 22:45

0

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

answered Feb 24 '20 at 22:45

Aveesha Sharma

59
2
2
7

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

3 Answers3