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?
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" );
});
});