Full Calendar is not loading automatically in Bootstrap Tab?

Question

I'm working on travelling website where I used a bootstrap tab. In first tab there is some content and in second tab I showed a full calendar js. All is working fine but when I show full calendar in first tab it working perfectly but when I show it in second tab it not loaded automatically but instead of that when I hit on month button or left right arrow it loaded.

Unable to figure out the issue. Below is the complete code:

  document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-08-07',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-08-28'
      }
    ]
  });

  calendar.render();
 });  

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

Exequies

Possible duplicate of FullCalendar Within Twitter Bootstrap Tabs – Chartier

no you stated the 5 year old version which is not applicable here. – Exequies

It might be an old version but to me it seems that the point is the same - you have to render the calendar each time you show the tab, or make sure the calendar tab is not hidden to begin with. – Revolt

Answer 1

Thanks to all of you who help to solve this issue. Below is the my version of solution that works for me fine:

  $(document).ready(function() {

    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['interaction', 'dayGrid', 'timeGrid'],
      defaultView: 'dayGridMonth',
      defaultDate: '2019-09-06',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay' },

    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-08-28'
      }
    ]
});
    calendar.render();
    $('.nav-tabs li a').click(function(){
      calendar.render();
    });
}); 

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active show">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade show">
    <h3>Calendar loaded when you double click on second tab link</h3>
    <div id='calendar'></div>
  </div>
</div>

Exequies

Answer 2

FullCalendar will not load if the div can't be seen (is with display: none; for instance).

The alternative is to listen to the #menu1 and, when it's visible, run calendar.render().

Alternatively, you can initiate the app having the calendar being the visible screen, like this:

<div class="tab-content">
  <div id="home" class="tab-pane fade in ">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade in active">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

 document.addEventListener('DOMContentLoaded', function() {
  var calendarButton = document.getElementById('calendarButton');
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '2019-08-07',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2019-08-01'
      },
      {
        title: 'Long Event',
        start: '2019-08-07',
        end: '2019-08-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2019-08-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2019-08-11',
        end: '2019-08-13'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T10:30:00',
        end: '2019-08-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2019-08-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2019-08-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2019-08-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-08-28'
      }
    ]
  });


calendar.render();

 });  

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>


<ul class="nav nav-tabs">
  <li ><a data-toggle="tab" href="#home">Home</a></li>
  <li><a id="calendarButton" data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in ">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade in active">
    <h3>Calendar not loaded automatically :(</h3>
    <div id='calendar'></div>
  </div>
</div>

Chartier

Answer 3

As a workaround, you can use one() event (which is identical to .on(), except that the handler for a given element and event type is unbound after its first invocation. docs):

$('#menu1').one('click', function(){
  $(this).click();
  calendar.render();
});

By this, the first click will trigger another click that displays the tab, then will render the calendar.

Adila