Problem with Fullcalender

I am having major probelms with the fullcalander plugin. the calander is displaying on the main page, but i am not getting any events from the database inserted into the calander.

code is below

this is the page which displays the calander


<?php include 'templates/session_start.php'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inn at Emmington CMS</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type='text/javascript' src='jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: false,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style type="text/css">
#loading {
position: absolute;
top: 5px;
right: 5px;
}

#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>

<body>
<div class="container">
<div class="header">
  <?php include 'templates/header.php'; ?>
  </div>
      
      <div class="body">
        <div class="navigation">
          <?php include 'templates/nav.php'; ?>
        </div>
        <div style="clear: right;"></div>
        <p class="title">Inn at Emmington CMS</p>
        <p><strong>Legend:</strong></p>
        <div style="width: 20px;height:20px;background-color:#00FF00;float: left;">&nbsp;</div> &nbsp; <div style="float: left;margin-left: 10px;">Single Rooms</div> &nbsp; <div style="width: 20px;height:20px;background-color:#000FFF;float: left;margin-left: 20px;">&nbsp;</div> &nbsp; <div style="float: left;margin-left: 10px;">Double Rooms</div> &nbsp; <div style="width: 20px;height:20px;background-color:#F00000;float: left;margin-left: 20px;">&nbsp;</div> &nbsp; <div style="float: left;margin-left: 10px;">Family Rooms</div>
        <p>&nbsp;</p>
        <!-- Calander booking system -->
        
       <div id='loading' style='display:none'>loading...</div>
<div id='calendar' style="padding-left: 0px;margin-left: -20px;"></div>
        </div>
  
  <div class="footer">
<?php include 'templates/footer.php'; ?>
</div>
</div>
</body>
</html>

and this is the json


<?php
$con = mysql_connect("localhost","username","password");
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("database", $con);
$query = "select * from `oc_calendar`";
$res = mysql_query($query) or die(mysql_error());
$events = array();
while ($row = mysql_fetch_assoc($res)) {
$start = $row['start_date'];//Here you have to format data from DB like this.
$end = $row['end_date'];//This format works fine
$title = $row['title'];
$firstname = $row['firstname'];
$surname = $row['surname'];
$color = $row['room_type'];

$eventsArray['id'] = $row['id'];
$eventsArray['title'] = $title.' '.$firstname.' '.$surname;
$eventsArray['start'] = $start;
$eventsArray['end'] = $end;
$eventsArray['backgroundColor'] = $color;
$events[] = $eventsArray;
}
echo json_encode($events);
?>

I have searched the web and found the same solution again and again.

please help, this is a major brain ache.

many thanks

Problem with Fullcalender

i am using fullcalander with php, mysql and json

pixelbof

coopster

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week