php include expression prevents FullCalendar from rendering

I am dealing with 2 php files which are tabs.php and timetable.php. tabs.php acts as a navbar and directs the user to many pages including timetable.php. Whereas timetable.php has a FullCalendar that works perfectly. The way I direct the user from tabs.php to timetable.php is as follows:

<li><button class="tablink" onclick="openPage('Timetable', this)"id="defaultOpen4">Timetable</button></li>
<div id="Timetable" class="tabcontent">
  <?php include("timetable.php"); ?>
</div>

The script for FullCalendar is as follows:

<script>
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        editable: false, //Prevents user from moving around events
        header: {
          left: 'prev, next today',
          center: 'title',
          right: 'month, agendaWeek, agendaDay'
        },
        events: function(start, end, timezone, callback) {
          $.ajax({
            url: 'loadEventsStudent.php',
            dataType: 'json',
            data: {},
            success: function(data) {
              var events = [];

              for (var i = 0; i < data.length; i++) {
                events.push({
                  title: data[i]['class'],
                  start: data[i]['start_event'],
                  end: data[i]['end_event'],
                });
              }
              //adding the callback
              callback(events);
            }
          });
        }
      });
    });
  </script>

The issue is that when I go to the timetable page, only the buttons of the calendar are visible. Once I click any of these buttons, the calendar then gets rendered. The script for the FullCalendar works perfectly fine as I tried running it on another file which makes me think that the include expression is causing this issue. When I try to inspect the Network tab of my browser, I noticed that once I open the timetable page, nothing happens, but once I click on any of the calendars’ buttons, the loadEventsStudent.php file (stores data from a database) appears and then the calendar gets rendered. Is there a way to make the calendar render without having to change the way both files are connected?

Answer

This is because include() is a PHP function and the HTML code for your calendar is already loaded to the browser.

The quick fix I would suggest is to trigger a click on the calendar buttons when you are viewing the page, so it can load the calendar events when your are visiting the calendar tab.

$( document ).ready(function() {

   // Your code for the calendar comes here

   $("#defaultOpen4").on("click", function() {
     $( ".class-of-the-calendar-button" ).trigger( "click" );
   });
});