Fullcalendar using a JSON PHP page as an event source - php

Question

I am trying to use a PHP page hosted on a MySQL server that generates a JSON feed that I want to use as in the "eventSources" array of Fullcalendar in my Ionic application. The calendar is rendering, but it isn't displaying the dates in the feed. I have been working at this for a couple of days and none of the documents on the Fullcalendar site aren't working.
Here's the JSON String:
{"success":1,"message":"Details Available!","events":[
{"ID":"1","title":"Example Class","start":"2014-08-29 09:00:00","end":"2014-08-29 17:00:00","all_day":"0"},
{"ID":"2","title":"Example Class 2","start":"2014-08-13 00:00:00","end":"2014-08-13 00:00:00","all_day":"0"},
{"ID":"3","title":"Example Event with Time","start":"2014-08-13 12:00:00","end":"2014-08-13 13:00:00","all_day":"0"},
{"ID":"11","title":"Testing 123","start":"2014-08-13 00:00:00","end":"2014-08-13 23:59:00","all_day":"1"}]}
Here is the PHP Page generating the JSON above:
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
header("Content-Type:application/json");
header("Access-Control-Allow-Origin: *");
$user="user";
$pass="password";
$table="database";
$db=new PDO("mysql:host=localhost;dbname=$table", $user,$pass);
//initial query
$query = "Select * FROM table";
//execute query
try {
$stmt = $db->query($query);
}
catch (PDOException $ex) {
$response["success"] = 0;
$response["message"] = "Database Error!";
die(json_encode($response));
}
// Finally, we can retrieve all of the found rows into an array using fetchAll
$rows = $stmt->fetchAll();
if ($rows) {
$response["success"] = 1;
$response["message"] = "Details Available!";
$response["events"] = array();
foreach ($rows as $row) {
$post = array();
$post["ID"] = $row["ID"];
$post["title"] = $row["title"];
$post["start"] = $row["start"];
$post["end"] = $row["end"];
$post["all_day"] = $row["all_day"];
//update our repsonse JSON data
array_push($response["events"], $post);
}
// echoing JSON response
echo json_encode($response);
} else {
$response["success"] = 0;
$response["message"] = "No Events Available!";
die(json_encode($response));
}
?>
Here is the the controller for the calendar:
App.controller('LogHomeCtrl', function($scope, $log, $state)
{
$scope.TimeTabl = function()
{
$state.go('timetable');
}
});
App.controller('calCtrl', function ($scope, $log, $state)
{
$scope.eventSources = [
{
events: {
url: 'url/calendarConnect.php',
type: 'POST',
error: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
}
];
});
I have tried using different methods of calling the PHP page, but none of it is working. If someone could point out where I am going wrong that would be great.

Answer 1

Exists few ways how you can set events for calendar:
1.as array:
events: [
{
title: 'Example Class',
start: '2014-08-29 09:00:00',
end: '2014-08-29 17:00:00'
},
{
title: 'Example Class 2',
start: '2014-08-13 00:00:00',
end: '2014-08-13 00:00:00'
}
]
2.as json object:
events: 'url/calendarConnect.php' //must to return json similar to previous example
3.as function:
events: function(start, end, timezone, callback) {
$.ajax({
url: 'url/calendarConnect.php',
dataType: 'json',
success: function(response) {
//get your events from response.events
console.log(response);
}
});
}
4.as custom function:
$.ajax({
url: 'url/calendarConnect.php',
dataType: 'json',
success: function(response) {
//just example
$('.calendar').fullCalendar({
events: response.events
});
}
});
In your case 3-rd way is more appropriate. For more details, please, see official Fullcalendar documentation about events.

Answer 2

Try changing this (add [] after ["events"]):
array_push($response["events"][], $post);