fullcalendar.io 5: addEventSource not work from external function

Question

For a small project I want to add events at runtime.

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.

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.

Where is the thought error?

The HTML

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

The 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 "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();
  });
 });
});

Here is my Test: https://jsfiddle.net/LukasHH/tu14xfwr/

Answer 1

The calendar variable you're using for calendar.addEventSource refers to a different FullCalendar instance than the one which is shown on your page. You have created a completely new calendar - but then didn't render it to the page. That's why you don't get errors, but also nothing useful happens.

The original calendar is defined and populated inside your document.addEventListener('DOMContentLoaded', function() { block, but you tried to create a new one inside your jQuery(document).ready(function($) { block. You need to use the existing reference to calendar - but of course it's out of scope when you need it, because you're in a different code block.

Now, document.addEventListener('DOMContentLoaded', function() { and jQuery(document).ready(function($) { are essentially equivalent, it's just that one is written in native JS and one is jQuery syntax. They basically do the same task - ie delay execution of the code until the DOM is completely loaded. Therefore it doesn't make much sense or add any value to have both of them in the page at the same time. Just use one block to include all of your code, and then you won't have any scope problems regardless.

As well as that, for similar reasons it also makes no sense to have another document.addEventListener('DOMContentLoaded', function() { within the jQuery "ready" block. You simply don't need it. I can only assume you didn't understand what that code did and thought it was part of fullCalendar - it's not.

And

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

makes no sense. There's no method called initialEvents in fullCalendar and you don't seem to be trying to use i for anything anyway, so you can just remove these lines.

eg

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'
      }
    ]
  });
});

Demo: https://jsfiddle.net/32w4kLvg/