0

I am using fullcalendar plugin for an MVC application and I want to add icon before title. So I am trying element.find('span.fc-title').appendBefore(''); to alter the HTML before rendering. But, here I am getting the error as cannot read property 'find' of undefined. I then checked the callback function parameters and found that I am getting the event properly but element and view as undefined. Following is my code and referred files.

bootstrap.css,
site.css,
core/main.css,
daygrid/main.css,
timegrid/main.css,
Scripts/jquery-{version}.js,
moment/main.js,
core/main.js,
daygrid/main.js,
timegrid/main.js,
interaction/main.js


var calendar = new FullCalendar.Calendar(calendarEl, {
header: false,
plugins: ['timeGrid', 'dayGrid', 'interaction'],
defaultView: 'timeGridDay',
allDaySlot: 'false',
slotDuration: '00:15:00',
editable: 'true',
eventRender: function (event, element, view) {
      console.log(event);
      console.log(element);
      console.log(view);
      element.find('span.fc-title').appendBefore('<i class="glyphicon glyphicon-plus" aria- 
      hidden="true"></i>');
},
events: [
         { 
           title: 'Title 1' ,
           start: '2020-05-03T02:30:00Z', 
           end: '2020-05-03T03:30:00Z'
         },
         { 
           title: 'Title 2', 
           start: '2020-05-03T02:00:00Z', 
           end: '2020-05-03T03:00:00Z' 
         },
         { 
           title: 'Title 3', 
           start: '2020-05-03T03:00:00Z', 
           end: '2020-05-03T04:00:00Z' 
         }
        ]
});
calendar.render();

'''
ADyson
  • 57,178
  • 14
  • 51
  • 63
Sahil Arora
  • 51
  • 1
  • 6
  • Read https://fullcalendar.io/docs/eventRender. How does the function signature look? As you can see it's `function( info ) { `, not `eventRender: function (event, element, view) {` - that version is from fullCalendar 3. Please ensure you double-check the documentation. If you are copying from examples you found online, please ensure they apply to the correct version of the product. In v4, as the documentation says, the objects you might be interested in (such as the event, the element, etc) are all sub-properties of `info`. Also be aware that the element is a DOM element, not a jQuery object. – ADyson May 03 '20 at 14:31
  • 1
    P.S. you said _"I am getting the event properly"_ ...no, you're not, look more closely at what is being logged! You're getting the `info` object, of which the event is only a one sub-property. – ADyson May 03 '20 at 14:33
  • 1
    Hi @ADyson. Thanks for pointing this out. Sorry, for the inconvenience. Actually I was referring the v4.4 doc and trying info.el..find('span.fc-title').appendBefore('') but then as it was a DOM element it was not working. Then I googled and tried some other things and forgot to replace them with v4.4 syntax. Now, I got the answer from your another link https://stackoverflow.com/questions/56033273/fullcalendar-js-v4-how-to-set-html-in-title/56042556#56042556. Thanks!!! for helping me out. – Sahil Arora May 03 '20 at 15:54

0 Answers0