CODEWITHSUNDEEP
javascriptphpjsonfullcalendarfullcalendar-5
Trevor
Trevor

Reputation: 23

Fullcalendar isn't loading my json to show events

I've been messing around with the fullcalendar java script and I can't seem to get the calendar to load any of the data my mysql database.

My db-connect.php file returns the first entry in the table when I test it, but still isn't populated onto the calendar.

<?php
// List of events
$events = array();

// connection to the database
$mysqli = new mysqli("localhost","username","password","database");

//check connection
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

//fetches and sends data in string
$result = $mysqli->query("SELECT * FROM events ORDER BY id");
$events = $result->fetch_array(MYSQLI_ASSOC);
echo json_encode($events);
?>

I also have a get_events.php that I tried setting up to only pull the date range. It doesn't pull any info when I test it but that should be because I'm testing it without a date range.

<?php
// List of events
$events = array();
$start = $_GET["start"];
$end = $_GET["end"];

// connection to the database
$mysqli = new mysqli("localhost","agaraapp_events","!QAZ@WSX3edc4rfv","agaraapp_events");

//check connection
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

//fetches and sends data in string
$query = mysqli_query($link, "SELECT * FROM events WHERE start >= '$start' AND end <= '$end'");
while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC)) {
   $e = array();
   $e['id'] = $fetch['id'];
   $e['title'] = $fetch['title'];
   $e['start'] = $fetch['start'];
   $e['end'] = $fetch['end'];
   array_push($events, $e);
}
echo json_encode($events);
?>

Then here is my calendar code.

   <head>    
        <meta charset="utf-8" />
        <link href="CalendarJava/main.css" rel="stylesheet" />
        <script src="CalendarJava/main.js"></script>
        <script>
          document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
              schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
              initialView: 'dayGridMonth',  
                events: {
            url: 'get_events.php',
            type: 'POST',
            data : {
            },
            success : function(response){
              }
       }  
             });
            calendar.render();
          });    
        </script>    
      </head>

I've changed the url to both get_events.php and db-connect.php but everytime I load it up it shows a blank calendar. I'm guessing I need an Ajax code but I'm not very schooled up on those. If that's what I'm missing then I'll try and study up on it and add it in.

Any help with what is going wrong would be helpful. I've read a bunch of of "related" issues on this but none of those problems seem to be correcting my problem.

EDIT1

db-connect.php returns the following results, which appears to be the correct format

{"id":"1","title":"Test","start":"2021-02-06 10:38:24","end":"2021-02-06 12:38:24"}

There are no errors on the server side either

Upvotes: 1

Views: 249

Answers (1)

Reflective
Reflective

Reputation: 3917

You can try the following, which first returns the JSON response as array and second the correct response header is set.

<?php
  // List of events
  $events = array();

  // connection to the database
  $mysqli = new mysqli("localhost","username","password","database");

  //check connection
  if (mysqli_connect_errno()) {
      printf("Connect failed: %s\n", mysqli_connect_error());
      exit;
  }

  //fetches and sends data in string
  $result = $mysqli->query("SELECT * FROM events ORDER BY id");
  while ($event = $result->fetch_array(MYSQLI_ASSOC)) {
    $events[] = $event;
  };

  // response should be associated with the correct header setting
  header('Content-Type: application/json; charset=utf-8');

  // now we can JSON the response
  echo json_encode($events);

  // in case we have some more code afterwards in some if statements 
  exit;
?>

Upvotes: 1

Related Questions