通过 onclick 从 resourceAreaHeaderContent (FullCalendar) 重新获取资源

Question

我正在使用 resourceAreaHeaderContent 回调将一些 HTML 打印到我的 resourceArea，包括一个应该启动函数的图标（通过 onclick）对资源排序做一些操作，写入数据库，最后从数据库中重新获取。

但是，如果这个函数在 document.addEventListener 之外，我得到 calendar.fullCalendar is not a function，如果这个函数在 document.addEventListener 里面，它就找不到，说 Example is not defined.

我想我遗漏了一些有关这里范围的信息，或者来自 resourceAreaHeaderContent 的函数调用不正确。我在 https://codepen.io/craftydlx/pen/RwaqbvL 有一个代码笔，这里是代码：

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'); 是 fullCalendar v3 或更低版本的旧语法。

应该是

calendar.refetchResources();

（根据 https://fullcalendar.io/docs/refetchResources）

您在 Test() 中做对了（尽管它超出了范围）所以不确定您为什么没有在 Example() 函数中复制它。

P.S。要使其在 Test() 函数的范围内，您所要做的就是使 calendar 也成为全局函数。

通过 onclick 从 resourceAreaHeaderContent (FullCalendar) 重新获取资源

Refetching resources by onclick from resourceAreaHeaderContent (FullCalendar)

javascript

onclick

fullcalendar

fullcalendar-5