fullcalendar.io 5：addEventSource 無法從外部工作 function

Question

對於一個小項目，我想在運行時添加事件。

實際日歷是使用數據庫中的數據創建的。 單獨的腳本創建額外的事件，這些事件是在日歷運行時動態創建的。 之后應將這些事件添加到現有日歷中。

為了測試，我有一個日歷和一個外部按鈕。 如果單擊該按鈕，應將一個事件添加到日歷中。 日歷已創建並且點擊被識別。 但是沒有添加任何事件。

思想錯誤在哪里？

HTML

<button class="holiday">Add Feiertage</button>
<div id='calendar'></div>

代碼：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek'
    },
    initialDate: '2020-11-12',
    businessHours: true, // display business hours
    editable: true,
    events: [
      {
        title: 'Business Lunch',
        start: '2020-11-03T13:00:00',
        constraint: 'businessHours'
      },
      {
        title: 'Meeting',
        start: '2020-11-13T11:00:00',
        constraint: 'availableForMeeting', // defined below
        color: '#257e4a'
      },
      {
        title: 'Conference',
        start: '2020-11-18',
        end: '2020-11-20'
      },
      {
        title: 'Party',
        start: '2020-11-29T20:00:00'
      },

      // areas where "Meeting" must be dropped
      {
        groupId: 'availableForMeeting',
        start: '2020-11-11T10:00:00',
        end: '2020-11-11T16:00:00',
        display: 'background'
      },
      {
        groupId: 'availableForMeeting',
        start: '2020-11-13T10:00:00',
        end: '2020-11-13T16:00:00',
        display: 'background'
      },

      // red areas where no events can be dropped
      {
        start: '2020-11-18',
        title: 'Test-Holiday',
        overlap: false,
        display: 'background',
        color: '#ff9f89'
      }
    ]
  });

  calendar.render();
});

// external events by Click
jQuery(document).ready(function($) {
   $('.holiday').on('click', function() {
   console.log('klick');

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl);

    //var src = calendar.getEventSources(); // give me a empty array

    calendar.addEventSource(
      {
        events: [ // put the array in the `events` property
          {
            title  : 'Test-Event',
            start  : '2020-11-11',
            overlap: false,
            display: 'background',
            color: '#ff9f89'
          }
        ]
      });
    calendar.refetchEvents();
  });
 });
});

這是我的測試： https://jsfiddle.net/LukasHH/tu14xfwr/

Answer 1

您用於calendar.addEventSource的calendar變量指的是與頁面上顯示的實例不同的 FullCalendar 實例。 您已經創建了一個全新的日歷 - 但沒有將其呈現到頁面上。 這就是為什么你沒有得到錯誤，但也沒有任何有用的事情發生。

原始calendar在您的document.addEventListener('DOMContentLoaded', function() {塊中定義並填充，但您試圖在jQuery(document).ready(function($) {塊中創建一個新日歷。您需要使用對calendar的現有引用 - 但當然，當你需要它時它不在 scope 中，因為你在不同的代碼塊中。

現在， document.addEventListener('DOMContentLoaded', function() {和jQuery(document).ready(function($) {本質上是等價的，只是一個是原生 JS 寫的，一個是 jQuery 語法。他們基本上是做相同的任務 - 即延遲執行代碼，直到 DOM 完全加載。因此，將它們同時放在頁面中沒有多大意義或添加任何值。只需使用一個塊來包含您的所有內容代碼，然后無論如何你都不會有任何 scope 問題。

除此之外，出於類似的原因，在jQuery “就緒”塊中有另一個document.addEventListener('DOMContentLoaded', function() {也是沒有意義的。你根本不需要它。我只能假設你沒有不明白該代碼做了什么，並認為它是 fullCalendar 的一部分 - 它不是。

和

var i = calendar.initialEvents();
console.log(i);    

沒有意義。 fullCalendar 中沒有名為 initialEvents 的方法，而且您似乎並沒有嘗試將i用於任何事情，因此您可以刪除這些行。

例如

jQuery(document).ready(function($) {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    //...etc
  });
  calendar.render();

  $('.holiday').on('click', function() {
    calendar.addEventSource({
      events: [ // put the array in the `events` property
      {
        title: 'Test-Event',
        start: '2020-11-11',
        overlap: false,
        display: 'background',
        color: '#ff9f89'
      }
    ]
  });
});

演示： https://jsfiddle.net/32w4kLvg/