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.

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.

• javascript
• php
• html
• fullcalendar
• fullcalendar-3

2 Answers 2

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

I note from the original version of your question that you were originally simply specifying the data feed as

events: 'loadCalendarEvents.php'

There's nothing wrong with that approach - it's documented by fullCalendar. FullCalendar will automatically send an AJAX request to that URL whenever it needs to fetch events.

The only problem you had with that version was the incorrect naming of the class, start_event and end_event fields - you need to call them title, start and end precisely to match the names required by fullCalendar, otherwise it won't recognise or use them, and of course an event without a recognised time and no description cannot be shown on a calendar.

There are two possible fixes for that:

1. Simply rename your database columns to title, start and end.

2. Use PHP to create an array with the fields named correctly:

Code:

while($row = $timetable->fetch_assoc()) {
    $myArray[] = array(
      "title" => $row["class"],
      "start" => $row["start_event"],
      "end" => $row["end_event"],
    );
}

N.B. You should also (as per the documentation) amend the PHP so it takes notice of the start and end parameters automatically appended to the request by fullCalendar, and restrict your SQL query to only returning events which fall between those dates. That way fullCalendar will only be given the data it actually needs, without inefficiently downloading (potentially) years of historical data which the user isn't going to look at.

P.S. If you're just getting started with fullCalendar I'd remend using the latest version 5, rather than the version 3 you seem to have used here. It's got more features, lots of bugs fixed, and its performance has improved. See https://fullcalendar.io/docs/v5/getting-started