title: fullcalendar.io 5: addEventSource not work from external function
body: <p>For a small project I want to add events at runtime.</p>
  <p>The actual calendar is created with data from a database. The separate script creates additional events, which are created dynamically at runtime of the calendar. These events should be added to the existing calendar afterwards.</p>
  <p>For testing I have a calendar and an external button. If you click on the button, an event should be added to the calendar. Calendar is created and the click is recognized. But no event is added.</p>
  <p>Where is the thought error?</p>
  <p>The HTML</p>
  <pre><code>&lt;button class=&quot;holiday&quot;&gt;Add Feiertage&lt;/button&gt;
  &lt;div id='calendar'&gt;&lt;/div&gt;
  </code></pre>
  <p>The Code:</p>
  <pre><code>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 &quot;Meeting&quot; 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();
    });
   });
  });
  </code></pre>
  <p>Here is my Test:
  <a href="https://jsfiddle.net/LukasHH/tu14xfwr/" rel="nofollow noreferrer">https://jsfiddle.net/LukasHH/tu14xfwr/</a></p>