Integrating jQuery fullcalendar into PHP website_问答_开发者

I would like to integrate the jQuery fullcalendar into my PHP webs开发者_开发知识库ite, but I don't know how to handle the event and how to use the JSON data from MySQL.

Any advice would be appreciated.

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/" 
      ) 

   ));

?>

"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.

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 :).

In PHP - JSON:

$eventsArray['allDay'] = "false"; //doesn't work

$eventsArray['allDay'] = false; //did the trick to have a NON FULL DAY correctly rendered!!

the output to echo an event should be in this format:

$('#calendar').fullCalendar({
  events: [{
    title: 'Awesome Event Title', 
    start: new Date($start_year, $start_month, $start_day),     or   end: new Date(y, m, d),
    end: new Date($end_year, $end_month, $end_day)    or   end: new Date(y, m, d)
  }]
});

implement it this way and it works fine

$result = mysql_query("SELECT * FROM eventoform",$conexion);
        $array = array();
        $i = 0;
        while ($row = mysql_fetch_array($result)) {
            $array[$i]=array("id"=>$row["id_evento"],"title"=>$row["NombreEvento"],"start"=>$row["FechaInicio"]." ".$row["HoraInicio"],"allDay"=>false,"description"=>$row["description"],"editable"=>true);
            $i++;
        }

 echo json_encode($array);

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.

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.

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);

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?

Fetch events using JSON
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.

just in case there is someone using rails with jbuilder to generate the json feed...you have to add the allDay attribute ...

json.array!(@resubmissions) do |object|
  json.id object.id
  json.title "WVL - #{object.to_s}"
  json.start object.resubmission_at.to_i
  json.allDay false
end

However, thanks for the PHP solution!