fullCalendar doesn't render inside a bootstrap tab

Question

Actually I'm trying to render fullCalendar inside a bootstrap tab, it works if the fullCalendar is in the active tab (generally first), but when i put it in another tab, and this is not active, when the page load calendar renders badly (I attached some images to show it).

Active tab is "Información básica", when i tab the "Calendario" appears that

I tried to do this:

$('#mytabcalendar').click(function () {
     calendar.updateSize();
});

where "mytabcalendar" is my tab "Calendar". Thanks for any ideas

Answer 1

When showing a new tab, You will need to the Events fire. Something like below.:

var triggerTabList = [].slice.call(document.querySelectorAll('a[data-bs-toggle="tab"]'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)
  triggerEl.addEventListener('hidden.bs.tab', function (event) {

    calendar.updateSize();

  })
})