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