How do I get FullCalendar to display information from my JSON feed?

Question

I'm setting up an app using FullCalendar (http://arshaw.com/fullcalendar/) that will allow the user to see client scheduling information as well as schedule clients through a management interface.

I want to use a MySQL database to populate an array, and then pass that array in the form of a JSON feed to FullCalendar on an HTML page. Ideally, then, the client information would show up on the HTML page. However, even though my JSON feed is being passed, there are no events on my FullCalendar.

Example JSON feed being passed:

[{"title":"Watson","start":"1333976400","end":"1333980000","allDay":false}]

I'm fairly new to these languages and I would not be surprised if this mistake turn out to be simple.

I would deeply appreciate any help or insight on having these events show up. When I manually feed an array into FullCalendar, it does show the events, but so far my JSON feed has resulted in no information being displayed.

Thank you

For reference: HTML:

        $(document).ready(function() {      
        $('#calendar').fullCalendar({
            events: '/json-events.php'
        });     
});

PHP:

        while ($record = mysql_fetch_array($result)) {
        $event_array[] = array(
            'id' => $record['id'],
            'title' => $record['title'],
            'start' => $record['start_date'],
            'end' => $record['end_date'],
            'allDay' => false
        );
    }

echo json_encode($event_array);

Answer 1

So the problem, for those searchers that come after me, was that my PHP file had HTML head and body tags. I'm a PHP noob and so I didn't know that would cause it not to work. In order for FullCalendar to display the JSON feed, it must ONLY have PHP code, no HTML. JSONLint.com was invaluable in figuring that out.

Answer 2

I set up a quick example and didn't have any trouble getting this to work:

PHP:

<?php

$record[0]["title"]="Test 1";
$record[1]["title"]="Test 2";
$record[2]["title"]="Test 3";

$record[0]["start_date"]="1333976400";
$record[1]["start_date"]="1333976401";
$record[2]["start_date"]="1333976402";

$record[0]["end_date"]="1333980000";
$record[1]["end_date"]="1333980001";
$record[2]["end_date"]="1333980002";

$record[0]["id"]="1";
$record[1]["id"]="2";
$record[2]["id"]="3";

for ($i=0; $i<3; $i++) {

    $event_array[] = array(
            'id' => $record[$i]['id'],
            'title' => $record[$i]['title'],
            'start' => $record[$i]['start_date'],
            'end' => $record[$i]['end_date'],
            'allDay' => false
    );


}

echo json_encode($event_array);


exit;

?>

HTML:

events: '/events.php'

Sample output from the PHP script:

[{"id":"1","title":"Test 1","start":"1333976400","end":"1333980000","allDay":false},{"id":"2","title":"Test 2","start":"1333976401","end":"1333980001","allDay":false},{"id":"3","title":"Test 3","start":"1333976402","end":"1333980002","allDay":false}]

So given that the above works for me and it's really no different to what you have above, you might need to check that the PHP script is actually getting called correctly. Check the Javascript console in Mozilla Firefox or Google Chrome to see if there are any errors thrown when Fullcalendar tries to load the events. Check your web server access/error logs for any mention of the PHP script.

Answer 3

events: '/json-events.php'

should be either

events: './json-events.php'

or

events: 'json-events.php'

Let me know if this helps...

EDIT

I also noticed that in the Json that your are receiving there is no id in the line. There may be something going on between the nameing of you id within the DB comparitively to the name your using in the array. Check it out and see if that is what is going on, because that is one of the properties that are required to pass the event.

EDIT

Try removing the [] from $event_array[] and see what happens... If that doesn't work than I am stumpped... sorry