Hi All,

I'm busy working on an events calendar the will be user specific. Unfortunately, my calendar is currently not even populating with the test data I am using.

Here is my code:

Code:
<?php
include_once '../includes/db_connect.php';
include_once '../includes/functions.php';
include_once '../includes/session_management.php';
?>


<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<link rel='stylesheet' href='cupertino/jquery-ui.min.css' />
<link href='fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.min.js'></script>
<script>

$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},



events: 'http://localhost/events/events.php',
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},

selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
location.reload();
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
}); 

</script>
<style>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 13px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 680px;
		margin: 0 auto;
		}

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
And my events source code:

PHP Code:
<?php
include_once '../includes/db_connect.php';
include_once 
'../includes/functions.php';
include_once 
'../includes/session_management.php';

                        
                        
// get the records from the database
                        
if ($result $mysqli->query("SELECT title, start, end, url, allDay FROM schedule ORDER BY id"));
                        
$arr = array();
                        while(
$row mysqli_fetch_assoc($result))
                        {
                        
$arr[] = $row;
                        }
                        echo 
json_encode($arr); 
          





?>

<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

When just opening the events.php file the array is populated as expected,
[{"title":"Test Event","start":"2014-01-01 09:00:00","end":"2014-01-01 18:00:00","url":"","allDay":"false"},{"title":"Test Event 2","start":"2014-01-02 11:00:00","end":"2014-01-02 23:00:00","url":"","allDay":"false"}]
but this is not being seen om my calendar at all.