将 jQuery fullcalendar 集成到 PHP 网站中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1666146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Integrating jQuery fullcalendar into PHP website
提问by SUN Jiangong
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.
我想将 jQuery fullcalendar 集成到我的 PHP 网站中，但我不知道如何处理该事件以及如何使用来自 MySQL 的 JSON 数据。
Any advice would be appreciated.
任何意见，将不胜感激。
回答by Graviton
Make sure that your PHP can output the following HTML code:
确保您的 PHP 可以输出以下HTML 代码：
<!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 samplehow you can do it, by using json_encode:
这是使用 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 代码：
<?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/"
)
));
?>
回答by Mikhail
"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.
“2010-02-11 11:00:00”格式可以很好地为我指定时间（里面没有“T”），解决方案的关键是将事件的“allDay”属性设置为空字符串。
回答by Mikel Sulanjaku
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:
我遇到了同样的问题，刚刚发现如何使它工作。这是您应该在 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);
I hope it helps :).
我希望它有帮助:)。
回答by Marco
In PHP - JSON:
在 PHP - JSON 中：
$eventsArray['allDay'] = "false"; //doesn't work
$eventsArray['allDay'] = false; //did the trick to have a NON FULL DAY correctly rendered!!
回答by DS Media
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)
}]
});
回答by carldeltoro
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);
回答by Nemi
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.
嘿，我没有使用你上面的代码，但在 json_events.php 中，默认的，php 输出的开头是“[”，结尾是“]”。
回答by lander
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);
回答by Colin Fine
I'm not familiar with jquery. But I thinkthe problem is that you are not taking into account the asynchronous nature of Ajax.
我不熟悉 jquery。但我认为问题在于您没有考虑 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.
除非 fullCalendar() 做了一些非常奇怪的事情（触发 Ajax 请求并等待响应），否则您将无法以这种方式在函数中使用外部源，因为 fullCalendar 将在响应时完成运行从服务器回来。
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.
在 Week Calendar 网页上似乎没有一个明确的例子说明您要做什么，但我确信您需要的是创建没有事件的日历，但定义了用于添加事件的回调；然后以某种方式触发外部呼叫。
回答by OneMuppet
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).
我想你和我有同样的问题。我在网上搜索，试图找出如何设置 DateTime 以便 fullCalendar javascript 能够正确解释它。（这个页面有一些很好的线索：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.
我将其发布在 fullCalendar 问题页面上，希望创建者或其他任何人能够对此主题有所了解。
====================ISSUE DESCRIPTION====================
====================问题描述====================
What steps will reproduce the problem?
哪些步骤将重现该问题？
- Fetch events using JSON
- use this JSON string:
- 使用 JSON 获取事件
- 使用这个 JSON 字符串：
[{"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.
- 我希望该事件将显示在日历中，开始时间为 10:00，结束时间为 11:01。
- 它显示为全天事件。
What version of the product are you using? On what operating system?
您使用的是什么版本的产品？在什么操作系统上？
- FullCalendar v1.4.1
- Windows XP
- 全日历 v1.4.1
- 视窗 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 DateTimeobject
that I'm returning in the JSONand that this is causing the fullcalendarto
interpret the events as fullDayEvents. The format that I'm sending in the
JSONis: 2009-11-17T11:01:00.
我正在使用 aspx 页面来获取日历事件。我的猜测是DateTime我返回的 JavaScript对象的格式有问题JSON，这导致fullcalendar将事件解释为fullDayEvents. 我发送的格式
JSON是：2009-11-17T11:01:00.
