FullCalendar.io not displaying events fed from JSON

Question

I have tried numerous ways to feed the events of the calendar. I have tried putting the JSON data into a variable and doing events = result and I have tried AJAX like I have now. The data is being fetched from a php function and it is the right syntax, i console log the data and here is what is returned: {title: 1, start: "2020-07-23"} . So I'm not sure why this is happening.

$('#calendar').fullCalendar({
    events:
      {
        url: '/modules/ajax/ajax_handler.php',
        method: 'POST',
        data: data,
        success: function(response) {
          console.log(response);
        },
        failure: function() {
          alert('there was an error while fetching events!');
        },
      }
    });

Ajax Handler:

elseif($_POST['action'] == 'getPeopleCountOnDate') {
        $date = $_POST['date'];
        $count = getPeopleCountOnDate($connection, $date);
        echo $count;
      }

PHP Script

function getBookingEventInfo($connection) {
  $dates;

  $query = "SELECT reservation_date, count(*) FROM bookings GROUP BY reservation_date";
  if($stmt = $connection->prepare($query)){
    $stmt->execute();
    $stmt->bind_result($date, $count);
    while($stmt->fetch()){
      $dates = array(
        "title" => $count,
        "start" => formatDate($date, 14)
      );
    }
    $stmt->close();
  }
  return json_encode($dates);
}

Answer 1

If response contains only {title: 1, start: "2020-07-23"} as you've mentioned in the question then you have a problem because it's not an array.

FullCalendar requires an array of events, not a single object. Even if that array will only contain 1 event, it must still be an array. Your server would need to return [{title: 1, start: "2020-07-23"}] as the JSON in order for it to work.

To achieve that in your PHP code you can write it like this:

function getBookingEventInfo($connection) {
  $dates = array(); //declare an array to contain all the results
  $query = "SELECT reservation_date, count(*) FROM bookings GROUP BY reservation_date";

  if($stmt = $connection->prepare($query)){
    $stmt->execute();
    $stmt->bind_result($date, $count);
    while($stmt->fetch()){
      //push the query result into the main array
      $dates[] = array(
        "title" => $count,
        "start" => formatDate($date, 14)
      );
    }
    $stmt->close();
  }
  return json_encode($dates);
}

Answer 2

Update 2 : Just in case, I would delete the success callback, maybe it is preventing your calendar component to get the data because it may be a sort of interceptor.

Update: I think the event you are returning in json may not be in the right format. In the docs they say start should be a complete timestamp. I think YYYY-MM-DD may not be enough, but add also the missing parts (ex: 2009-11-05T13:15:30Z)

---

Did you read the docs ?

One think that is obscure in your answer is, what did you pass as data ? And look at the docs, they use eventSources as an array.