Hello,
I would like to integrate the jQuery fullcalendar into my PHP website, but I don't know how to handle the event and how to use the JSON data from MySQL.
Any advice would be appreciated.
+2
A:
Make sure that your PHP can output the following HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#example').calendar();
});
</script>
</head>
<body>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script src="http://dev.jquery.com/view/trunk/plugins/calendar/jquery-calendar.js"></script>
<input type="text" id="example" value="Click inside me to see a calendar" style="width:300px;"/>
</body>
</html>
Here's a sample how you can do it, by using json_encode:
$(document).ready(function() {
$('#calendar').fullCalendar({
draggable: true,
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();
}
});
});
And here's the PHP code:
<?php
$year = date('Y');
$month = date('m');
echo json_encode(array(
array(
'id' => 1,
'title' => "Event1",
'start' => "$year-$month-10",
'url' => "http://yahoo.com/"
),
array(
'id' => 2,
'title' => "Event2",
'start' => "$year-$month-20",
'end' => "$year-$month-22",
'url' => "http://yahoo.com/"
)
));
?>
Ngu Soon Hui
2009-11-03 09:17:13
Thanks a lot for your comment. But i think you have some misunderstanding or i didn't describe it very clearly.I want to add the jquery weekcalendar plugin and there is a sample for it. Everything is in session there. But i want to make it work with mysql database.Thanks a lot!!!!!!!
garcon1986
2009-11-03 09:29:40
A:
@Ngu Soon Hui
Thanks for your post. It works in the static mode.
But i want to use json in a dynamic way. Here is my code.
calendar.php:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
draggable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json_events.php",
}
});
});
body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
json_events.php:
<?php
require("../../../connect/config.php");
$link = mysql_connect("$server","$user","$password") or die(mysql_error());
mysql_select_db($db);
$query = "SELECT * FROM events";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_assoc($result)){
echo json_encode($row);
}
?>
the output of json_events.php:
{"id":"1","title":"event1","start":"2009-11-10 14:18:15","end":"2009-11-03 14:38:22","allDay":"false","url":null}
But it doesn't display in the calendar.php page.
Does anyone can tell me where is wrong???
garcon1986
2009-11-03 13:43:34
A:
I'm not familiar with jquery. But I think the problem is that you are not taking into account the asynchronous nature of Ajax.
Unless fullCalendar() does something very odd (fires off an Ajax request and waits for the response), then you will not be able to use an external source in the function in that way, because fullCalendar will have finished running by the time a response comes back from the server.
There does not appear to be a clear example of what you are trying to do on the Week Calendar webpage, but I am sure that what you need is to create the calendar without the events, but with a callback defined for adding events; and then in some way fire off the external call.
Colin Fine
2009-11-03 14:10:42
Thanks for your post. You kind of have indicated my problem. Actually, I can't add/edit/delete the events and can't grab the data from mysql in the way of json. I'll try to arrange and solve it. And thanks.
garcon1986
2009-11-03 14:30:15
A:
Actually i can't display event in fullcalendar. Because i don't know how to format the result in events.
Here is my code:
calendar.php
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
draggable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
/*events: "json_events.php",*/
events: function(start, end, callback){
$.getJSON("json_events.php",
{
start: start.getTime(),
end: end.getTime()
},
//format the result into an array of calevents
*function(result){
for(var i=0; i<result.length; i++){
var row = result[i];
}*
//then pass the calevent array to the callback
callback(calevents);
}
);
},
json_events.php:
<?php
require("../../../connect/config.php");
$link = mysql_connect("$server","$user","$password") or die(mysql_error());
mysql_select_db($db);
$query = "SELECT id,title,start, end FROM events";
$result = mysql_query($query) or die(mysql_error());
$arr = array();
while($row = mysql_fetch_assoc($result)){
$arr[] = $row;
}
echo json_encode($arr);
?>
Can anyone correct my code or give me a clue?
Thanks a lot.
garcon1986
2009-11-04 11:06:10
A:
I'm just trying to display the events right now, but with my code, it displays nothing in the calendar.
This is how the json displayed:
[{"id":"1","title":"piman","start":"2009-11-04 00:00:00","end":"2009-11-04 16:00:00"},{"id":"2","title":"event2","start":"2009-11-05 00:00:00","end":"2009-11-06 00:20:00"}]
can anyone help me out??? A million thanks.
garcon1986
2009-11-05 17:50:26
A:
I think your having the same problem as I'm having. I've search the web trying to find out how to setup the DateTime so that the fullCalendar javascript will interpret it correctly. (This page had some good clues to that: http://blog.stevenlevithan.com/archives/date-time-format).
I posted this on the fullCalendar issues page hoping that the creator or anyone else would shed some light on the subject. ********** ISSUE DESCRIPTION **************** What steps will reproduce the problem? 1. Fetch events using JSON 2. use this JSON string: [{"id":2, "title":"title of 2" ,"start":"2009-11-17T10:00:00" ,"end":"2009-11-17T11:01:00" ,"url":"?eventID=2"}]
What is the expected output? What do you see instead? * I expect that the event will show up in the calendar with start time 10:00 and end time 11:01. * It show up as an all day event.
What version of the product are you using? On what operating system? * FullCalendar v1.4.1 * Windows XP
Please provide any additional information below. I am using an aspx page for fetching the calendar events. My guess is that there is something wrong with the format of the javascript DateTime object that I'm returning in the JSON and that this is causing the fullcalendar to interpret the events as fullDayEvents. The format that I'm sending in the JSON is: 2009-11-17T11:01:00.
Borgenvik
2009-11-18 09:07:06
+1
A:
Hello,
I had the same problem and just found out how to make it work. Here is the code that you should use in your php file:
$query = "select * from events where accountNo = '$accountNo'";
$res = mysql_query($query) or die(mysql_error());
$events = array();
while ($row = mysql_fetch_assoc($res)) {
$start = "2010-01-08T08:30"";//Here you have to format data from DB like this.
$end = "2010-01-08T08:30";//This format works fine
$title = $row['firstName']." ".$row['lastName'];
$eventsArray['id'] = $row['id'];
$eventsArray['title'] = $title;
$eventsArray['start'] = $start;
$eventsArray['end'] = $end;
$eventsArray['allDay'] = "";
$events[] = $eventsArray;
}
echo json_encode($events);
I hope it helps :).
Mikel Sulanjaku
2010-01-08 16:39:33
+2
A:
"2010-02-11 11:00:00" format works fine to specify time for me (without "T" inside), the key of the solution is to set the "allDay" attribute of an event to empty string.
Mikhail
2010-02-10 06:12:28
A:
Hey, I have not used your code above, but in json_events.php the default one, there is "[" in the start of php output and "]" on the end.
Nemi
2010-04-19 00:07:55
A:
This example works:
$sql= "SELECT id, title, start, DATE_FORMAT(start, '%Y-%m-%dT%H:%i' ) AS startDate
FROM kalender
ORDER BY startDate DESC";
$res = mysql_db_query($db, $sql, $conn) or die(mysql_error());
$events = array();
//important ! $start = "2010-05-10T08:30"; iso8601 format !!
while ($row = mysql_fetch_assoc($res)) {
$eventArray['id'] = $row['id'];
$eventArray['title'] = $row['title'];
$eventArray['start'] = $row['startDate'];
$events[] = $eventArray;
}
echo json_encode($events);
lander
2010-05-27 08:15:24