FullCalendar not displaying events

Question

I'm still new to fullCalendar and I am trying to display events that are retrieved from a Mysql database. The structure of my table is as follows:

The content of my table is as follows:

Below is the script I used to generate the fullCalendar:

<script>
        $(document).ready(function(){
            $('#calendar').fullCalendar({
                editable:true,
                header:{
                left:'prev, next today',
                center:'title',
                right:'month, agendaWeek, agendaDay'
                },
                //events: 'loadCalendarEvents.php'
                events: function(start, end, timezone, callback){
                  $.ajax({
                    url: 'loadCalendarEvents.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'],
                        });
                      }
                    }
                  });
                }
            });
        });
    </script>

Below is the file that adds the events (loadCalendarEvents.php):

<?php
    include("db.php");//Includes the database file that makes the connection
    $timetable = mysqli_query($conn, "SELECT class, start_event, end_event  FROM lecturertimetable");//Loading events for the calendar
    $myArray = array();
    if ($timetable->num_rows > 0) {
        // To output the data of each row
        while($row = $timetable->fetch_assoc()) {
            $myArray[] = $row;
        }
    } 
    echo json_encode($myArray);
?>

However, none of the events are getting displayed and I am not sure what I am doing wrong.

Answer 1

This is because your HTML page renders FullCalendar javascript on page load. So at that time you do not have any events. (Because the browser has to make a request to the loadCalendarEvents.php to get the events.)

You can solve this in three ways.

1. Create the JSON object for the events in your controller and pass as a parameters.
2. Make an AJAX Request to loadCalendarEvents.php and on success, load the events to the calendar.
3. Make an AJAX request to loadCalendarEvents.php and on success, render the fullCalendar.

Following code sends an AJAX call to get the events from loadCalendarEvents.php.

$('#calendar').fullCalendar({
      events: function(start, end, timezone, callback) {
         $.ajax({
            url: 'loadCalendarEvents.php',
            dataType: 'json',
            data: {
               // If you have some data to send to loadCalendarEvents.php
                id: 1,
                name: "hello"
             },
             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);
              }
         });
     }
 });