Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.According to the API document (https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview), the recommended way to avoid duplicated render from Ajax reloading and BigPiple loading (See https://www.drupal.org/project/drupal/issues/2978900) is using the JQuery once() method.
My understanding is that BigPipe sends a HTML response in chunks and cycles through the Drupal.behaviors object calling after each chunk is arrived. That is why a Drupal.behavior will be called multiple times during the page is loading. The JS snippets wrapped in the once() method will run only once, but after that, the DOM might be changed by other modules.
So when the Fullcalendar JS response to an event , such as resize, drop, a JavaScript error throwed said, "TypeError: e.querySelector(...) is null" in Firefox or "Uncaught TypeError: Cannot read property 'appendChild' of null" in Chrome. Which breaks the Drag and Drop functionality of FullCalendar.
Comments
Comment #3
MingsongComment #4
MingsongA workaround is to rebuild the calendar every time the Drupal.behaviors cycle is running, which is not ideal.
Once the new feature of controlling the weight for behaviors is introduced to Drupal 9, a more efficient way can be done is to specify the weight for Drupal.behaviors.fullcalendarView, so that the calendar will be only render once after the DOM is finally settle down.
Comment #5
MingsongComment #6
MingsongComment #7
Mingsong