javascript - Events are badly rendered if calendar on a nav-tab

Question

I just made a not very cool discovery ...

I am using FullCalendar on my app. I have a page that contains several tabs (made with bootstrap), like this:

The last tab "Provisional calendar" must contain a FullCalendar.

But I noticed one thing:

If the DOM element that should host the fullCalendar is not visible when the page loads, then the events will be badly rendered, like this:

The only possibilities for events to be correctly rendered are as follows:

1. Or load the page directly on the last tab "Provisional calendar".

2. Either, when loading the page, quickly click on the "Provisional calendar" tab to arrive on the tab before the events have time to be retrieved to be returned.

3. Manually resize the window, which will trigger the call of the handleWindowResize () function and correctly put the events back in the calendar.

Which in the end will correctly deliver my events:

Other possible solutions would be:

1. Make sure that fullCalendar can handle this case.

2. Have an "eventAllRendered" option on the latest version of FullCalendar, in which we could call a function that would allow the events to be correctly delivered.

This si a codePen to simulate the bug : https://codepen.io/kiuega/pen/VwmeLgB

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Click here to display calendar</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <div id='top'>

  Locales:
  <select id='locale-selector'></select>
</div>


<div id='calendar'></div>
    
  </div>
</div>

document.addEventListener('DOMContentLoaded', function() {
  var initialLocaleCode = 'de';
  var localeSelectorEl = document.getElementById('locale-selector');
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
    },
    locale: initialLocaleCode,
    initialView: 'timeGridWeek',
    buttonIcons: false, // show the prev/next text
    weekNumbers: true,
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    dayMaxEvents: true, // allow "more" link when too many events
    events: 'https://fullcalendar.io/demo-events.json?overload-day'
  });

  calendar.render();

  // build the locale selector's options
  calendar.getAvailableLocaleCodes().forEach(function(localeCode) {
    var optionEl = document.createElement('option');
    optionEl.value = localeCode;
    optionEl.selected = localeCode == initialLocaleCode;
    optionEl.innerText = localeCode;
    localeSelectorEl.appendChild(optionEl);
  });

  // when the selected option changes, dynamically change the calendar option
  localeSelectorEl.addEventListener('change', function() {
    if (this.value) {
      calendar.setOption('locale', this.value);
    }
  });

});

question from:https://stackoverflow.com/questions/66049327/events-are-badly-rendered-if-calendar-on-a-nav-tab

Answer 1

Waitting for answers