Fullcalendar 4.3 adding title to background event

Question

fullcalendar 4.3 no longer uses jquery, after this i find it challenging to get the customization that i would like to have. What i want is pretty simple to explain: i want the title of a background event to be visible. So from this:

to this:

I did this change by hand (edit as html in firefox inspector), but would like to do it using javascript code. This part works:

        {
      start: '2019-08-06',
      end: '2019-08-10',
      overlap: false,
      title: 'Schoolvakantie',
      rendering: 'background',
      color: '#ff9f89'
      ,les: 'geenles'
    }
  ],
    eventRender: function (info) {
        if (info.event.extendedProps.les == 'geenles') {
            console.log(info.event);
        }
    }

But then instead of the console.log i would apply some change to the event, however the old event.prepend function is not available as jquery is no longer used. Any ideas ?

btw, strange thing, if i add something inside the eventRender that changes anything in the event, such as

                info.event.setProp( "textColor", "#ff00ff" ); //(after the console.log)

the javascript will go into an infinite loop. Very strange...

setting a property within eventRender doesn't help you because fullCalendar is no longer looking at the event properties in order to draw the event - that has already happened, and the eventRender callback is your opportunity to change or add things to how the event is drawn, just before it is finally added to the calendar. — ADyson, Feb 21 '20 at 14:38
If you want to change things about the event which is being drawn, you can access the HTML element at `info.el` (as mentioned in the [documentation](https://fullcalendar.io/docs/eventRender), and use standard JavaScript code to update that element, or add child elements to it, etc. It's not code which is specific to fullCalendar, just normal Javascript you would use for manipulating the DOM. (And if you prefer to still use jQuery for doing that, just wrap the element in a jQuery object first e.g. `$(info.el)` and then you can use jQuery methods to manipulate it instead.) — ADyson, Feb 21 '20 at 14:39

score 2 · Accepted Answer · answered Feb 28 '20 at 11:40

With the hints from ADyson i got it to work by simply adding the following eventRender function after the events array:

  eventRender: function(info) {
      if(info.event.extendedProps.something == 'something'){
          info.el.innerHTML = '<br>'+info.event.title;
      }
  }

Fullcalendar 4.3 adding title to background event

1 Answers1