Refetching resources by onclick from resourceAreaHeaderContent (FullCalendar)

Question

I am using the resourceAreaHeaderContent callback to print some HTML to my resourceArea, including an icon which is supposed to start a function (by onclick) which does some operations on resource sorting, writes them to database and refetches them from the database in the end.

However, if this function is outside the document.addEventListener, I get calendar.fullCalendar is not a function and if the function is inside the document.addEventListener it can't be found, saying Example is not defined.

I think I am missing something about the scope here or the function call from resourceAreaHeaderContent is not correct. I have a codepen at https://codepen.io/craftydlx/pen/RwaqbvL and here is the code:

function Test(){
  console.log("entering test");
  console.log(calendar.id); //prints "calendar"
  //$('#calendar').fullCalendar('refetchResources'); //"calendar.fullCalendar is not a function"
    //calendar.fullCalendar('refetchResources'); //"calendar.fullCalendar is not a function"
  calendar.refetchResources(); //"calendar.refetchResources is not a function"
}

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, { 
      resourceAreaHeaderContent: { html: 
        '<div class="d-flex flex-column align-items-start">' + 
          '<div class="p-2"><div class="resourceLabel align-middle">Ressource</div></div>' +
          '<div class="p-2"></div>' +
          '<div class="p-2"></div>' +
          '<div class="p-2">' +
            '<br><i class="material-icons sorter" onclick="Test()">[ Test() ]</i>' + '<br><br>' + 
            '<i class="material-icons sorter" onclick="Example()">[ Example() ]</i>' +
          '</div>' +
        '</div>'        
      },
    headerToolbar: {
      left: 'today',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek'
    },
      slotLabelFormat: [
        { month: 'long', year: 'numeric' }, // top level of text
        { week: 'W' },
        { weekday: 'short', day: '2-digit' } // lower level of text
      ],
    initialView: 'resourceTimelineWeek',
    resources: 'https://fullcalendar.io/demo-resources.json',
    events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline',
  });
  function Example(){   //"Example is not defined"
    //$('#calendar').fullCalendar('refetchResources'); //calendar.fullCalendar is not a function
      calendar.fullCalendar('refetchResources'); //calendar.fullCalendar is not a function       
  }
  calendar.render();
});

Answer 1

calendar.fullCalendar('refetchResources'); is old syntax from fullCalendar v3 or below.

It should be

calendar.refetchResources();

(as per https://fullcalendar.io/docs/refetchResources)

You did it right in the Test() (albeit it's out of scope) so not sure why you didn't copy that in the Example() function.

P.S. To make it in scope in the Test() function all you have to do is make calendar global too.