1

How can I insert HTML into an event title in eventRender in a fullCalendar v4?

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {

    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
    header: {
        left: 'title',
        center: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
        right: 'prev,next today'
    },
    navLinks: true, // can click day/week names to navigate views
    businessHours: true, // display business hours
    editable: true,
    locale: 'ru',

    events: [
        {
            title: 'Go Space :)',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
            start: '2019-12-27',
            end: '2019-12-27'
        },
        {
            title: 'Dentist',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
            start: '2019-12-29T11:30:00',
            end: '2019-12-29T012:30:00'
        }
    ],
    eventRender: function(event, element) {

        element.find(".fc-title").append('<strong>bla bla bla</strong>');

    },
  });

  calendar.render();
});

This code works in v3, but doesn't work in v4.

Error:

"Cannot read property 'find' of undefined"

ADyson
  • 57,178
  • 14
  • 51
  • 63
LIGGTH
  • 123
  • 2
  • 8
  • 1
    that's because 1) `element` is undefined because the callback signature of `eventRender` in v4 is different - did you check the [documentation](https://fullcalendar.io/docs/eventRender)?? The error is telling you that `element` is undefined, so clearly fullCalendar is not delivering that parameter to your callback. and 2) v4 doesn't use jQuery, so you will need to use native JS functions to manipulate the element (or wrap it in a new jQuery object first). This has been asked about before as well, did you search for previous questions / examples online? – ADyson Dec 13 '19 at 12:13
  • @ADyson, I didn't find examples for version 4. I did not ask before. see my example https://codepen.io/liggth/pen/LYEZwXx?editors=0010 – LIGGTH Dec 13 '19 at 12:24
  • I didn't say _you_ had asked before, I said _this topic_ has been asked about before. – ADyson Dec 13 '19 at 12:38
  • "I didn't find examples for version 4"...perhaps because you didn't read the documentation? That would always be the first place to look. But anyway that CodePen link you've just posted _is_ a v4 example. So if you were looking at that, I don't understand how you ended up with the code you've shown in the question? – ADyson Dec 13 '19 at 12:38
  • And if you google "fullCalendar v4 eventRender example" you get results such as [this one](https://stackoverflow.com/a/56042556/5947043) (created some months ago by yours truly) which should give you a good idea of what to do. I'm not sure how much research you put into this question. – ADyson Dec 13 '19 at 12:46

2 Answers2

0

In your eventRender, look for the selector of the title and change the innerHtml:

eventRender: function(info) {
  ...

  let selector = info.el.querySelector('.fc-title');
  if (selector) { 
    selector.innerHTML = info.event.title + '<br><span class="text-muted" style="font-size: 90%">Subtitle'</span>';
  }

  ...
}

I know it's probably late for you, but it may help others, as I spent some time figuring it out.

Ginji
  • 1
0
let selector = info.el.querySelector('.fc-title');
if (selector) { 
    selector.innerHTML = info.event.title + '<br><span class="text-muted" style="font-size: 90%">Subtitle'</span>';
}
tdy
  • 36,675
  • 19
  • 86
  • 83
Proteus
  • 3
  • 1
  • 3