Ellert van Koperen
Ellert van Koperen

Reputation: 583

Fullcalendar 4.3 adding title to background event

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

to this: after

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

Upvotes: 2

Views: 1142

Answers (1)

Ellert van Koperen
Ellert van Koperen

Reputation: 583

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

Upvotes: 2

Related Questions