将jQuery fullcalendar集成到PHP网站中

时间:2009-11-03 09:12:19

标签: php jquery calendar fullcalendar

我想将jQuery fullcalendar集成到我的PHP网站中,但我不知道如何处理该事件以及如何使用MySQL的JSON数据。

任何建议都将受到赞赏。

11 个答案:

答案 0 :(得分:14)

确保您的PHP可以输出f ollowing 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>

这是a sample如何使用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(); 
         } 
      }); 

   });

这是PHP代码:

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

   ));

?>

答案 1 :(得分:9)

“2010-02-11 11:00:00”格式可以为我指定时间(内部没有“T”), 解决方案的关键是将事件的“allDay”属性设置为空字符串。

答案 2 :(得分:3)

我遇到了同样的问题,并且发现了如何让它发挥作用。 以下是您应该在php文件中使用的代码:

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

我希望它有所帮助:)。

答案 3 :(得分:3)

在PHP中 - JSON:

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

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

答案 4 :(得分:1)

回显事件的输出应采用以下格式:

$('#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)
  }]
});

答案 5 :(得分:1)

以这种方式实现它并且工作正常

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

答案 6 :(得分:0)

我不熟悉jquery。但是我认为问题在于你没有考虑到Ajax的异步性质。

除非fullCalendar()执行非常奇怪的操作(触发Ajax请求并等待响应),否则您将无法以这种方式在函数中使用外部源,因为fullCalendar将完成运行从服务器返回响应的时间。

似乎没有一个明确的示例表明您在周日历网页上尝试做什么,但我确信您需要的是创建没有事件的日历,但是为添加事件定义了回调;然后以某种方式触发外部呼叫。

答案 7 :(得分:0)

我认为你遇到了和我一样的问题。我在网上搜索试图找出如何设置DateTime,以便fullCalendar javascript将正确解释它。 (这个页面有一些很好的线索:http://blog.stevenlevithan.com/archives/date-time-format)。

我在fullCalendar问题页面上发布了这个帖子,希望创作者或其他任何人能够对这个问题有所了解。

====================问题描述====================

哪些步骤会重现这个问题?

  1. 使用JSON
  2. 获取事件
  3. 使用此JSON字符串:
  4. [{"id":2, "title":"title of 2","start":"2009-11-17T10:00:00" ,"end":"2009-11-17T11:01:00","url":"?eventID=2"}]
    

    预期产量是多少?你怎么看?

    • 我希望活动会在开始时间的日历中显示 10:00和结束时间11:01。
    • 它显示为全天活动。

    您使用的是哪个版本的产品?什么操作系统?

    • FullCalendar v1.4.1
    • Windows XP

    请在下面提供任何其他信息。

    我正在使用aspx页面来获取日历事件。我的猜测是 JavaScript DateTime对象的格式有问题 我正在JSON返回,这导致fullcalendar 将事件解释为fullDayEvents。我正在发送的格式 JSON是:2009-11-17T11:01:00

答案 8 :(得分:0)

嘿,我没有使用上面的代码,但在json_events.php中是默认代码,有 “[”在php输出的开头,“]”在结尾

答案 9 :(得分:0)

此示例有效:

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

答案 10 :(得分:0)

以防有人使用带jbuilder的rails来生成json feed ...你必须添加allDay属性 ......

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

但是,感谢PHP解决方案!