Solved

Fullcalendar (JQuery Calendar) and JSON communication error

Posted on 2012-04-09
4
4,959 Views
Last Modified: 2012-04-23
Hello,

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 my 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 at all surprised if this mistake turned 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:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Calendar</title>
		<script src="jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
  		<script src="jquery-ui-1.8.17.custom.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel='stylesheet' type='text/css' href='fullcalendar.css' >
		<script type='text/javascript' src='jquery.js'></script>
		<script type='text/javascript' src='jquery.validate.js'></script>
		<script type='text/javascript' src='fullcalendar.js'></script>
	<script type="text/javascript">
		$(document).ready(function() {		
			$('#calendar').fullCalendar({
			    events: '/json-events.php'
			});		
	});
	</script>
	</head>
	<body>
		<div id="calendar"></div>
	</body>
</html>

Open in new window


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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>json-events</title>
</head>

<body>
	<?php 
		$start = $_GET['start'];
		$end = $_GET['end'];
		
		$hostname='localhost';
		$username='root';
		$password='password';
		$dbname='dbname';
		
		mysql_connect($hostname, $username, $password) or die("Unable to connect!");
		mysql_select_db($dbname);
	
		$result = mysql_query("select * from events");
		
		$event_array = array();
		
		while ($record = mysql_fetch_array($result)) {
		    $event_array[] = array(
		        'id' => $record['id'],
		        'title' => $record['title'],
		        'start' => $record['start_date'],
		        'end' => $record['end_date'],
		        'allDay' => $record['all_day']
		    );
		}
	echo json_encode($event_array);
	?>
	
</body>

</html>

Open in new window

0
Comment
Question by:deedub84
  • 3
4 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
Have you verified that the PHP script works correctly, returning a JSON string?  You should be able to test this by running the PHP script with a web browser.  I am curious about lines 11 and 12 of the PHP script.  These lines assume the existence of GET arguments that may not be present, and they assign variables that appear to be unused in the script.  That may be throwing a message or something that could bollix up the expected JSON return.
0
 
LVL 1

Author Comment

by:deedub84
Comment Utility
When I run the php script in a browser I get back the JSON string--

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

which is what reflects what's in the sample database.  To my eye it appears correctly formatted.  Line 15 (events: '/json-events.php') doesn't seem to be finding the php script.  Am I missing something simple about referencing it's location (it is currently in the same directory as the HTML file?
0
 
LVL 1

Accepted Solution

by:
deedub84 earned 0 total points
Comment Utility
My PHP file was wrapped with HTML Tags, which made it look fine in a browser, but not work for the FullCalendar application.  Very rookie mistake indeed!
0
 
LVL 1

Author Closing Comment

by:deedub84
Comment Utility
Found my (very basic) error.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now