未加载来自 ajax 响应的 fullCalendar 事件

另一个关于ajax和fullCalendar的问题。我已经阅读并尝试了以前在这里建议的修复程序，但都无济于事。我无法将 JSON 事件加载到完整日历。我做错了什么？

$.ajax 调用正在工作并返回值。 JSON有一个父元素，日历数组数据实际上在jsondata.message中。下面代码中的JSON.stringify是我各种实验的一部分。

我最初尝试将 fullCalendar eventSource 与内置的 ajax 检索一起使用。我隔离了代码，认为我遇到了通话/通信问题。

我试过[jsondata.message]，只是jsondata.message。我尝试将 JSON 数据解析为标准数组并将数组传递给事件项。除了复制响应并将其粘贴到事件中之外，我什么也做不了：双引号内的元素有效。

AJAX 调用工作并返回数据。
因为我可以将 ajax 响应中的数据复制/粘贴到代码和事件加载中，所以它不是数据的格式。

加载事件是否有限制？我正在尝试加载大约 4800 个事件。

AJAX 调用：

$.ajax({
url: "/appointment/ajax_get_available_records",
type: "POST",
data:{
startdate: start.format("YYYY-MM-DD 00:00:01"),
enddate: end.format("YYYY-MM-DD 23:59:59"),
userid:<?= $doctor->user_id?>
},
error: function() {
$('#errormsg').html("<p class='alert alert-danger'>There was an error while fetching calendar events!</p>'");
},
success: function(jsondata, status, xhr){
$('#calendar').fullCalendar({
events: [JSON.stringify(jsondata.message)],
color: 'green',
textColor: 'white' 
});             
},
dataType: "json" 
});

响应标头

Cache-Control:no-transform,public,max-age=300,s-maxage=900
Content-Length:104282
Content-Type:application/json
Date:Tue, 04 Apr 2017 02:40:50 GMT
Server:Microsoft-IIS/10.0
X-Powered-By:ASP.NET

** 部分 AJAX 响应**

{"status":true,
"message":[{
"doctor_user_id":"636",
"title":"available",
"start":"2017-04-03T19:10:00",
"end":"2017-04-03T19:19:59",
"clinic_id":"10",
"clinic_location_id":"0"
},
{
"doctor_user_id":"636",
"title":"available",
"start":"2017-04-03T19:20:00",
"end":"2017-04-03T19:29:59",
"clinic_id":"10",
"clinic_location_id":"0"
},
---- omitted  ----

服务器 php 7.0/MySQL 型：

function get_available_dates_in_range($user_id, $start_datetime = null , $end_datetime = null)
{
$startrange = date('Y-m-01 H:i:s',strtotime($start_datetime));
$endrange = date('Y-m-d 23:59:59',strtotime($end_datetime));
if($endrange == NULL) {
$end_datetime = date_add($startrange,date_interval_create_from_date_string("INTERVAL 2 MONTHS")); 
$endrange = date("Y-m-01 00:00:00",$end_datetime);
}
$this->db->select(
"doctor_user_id, 
status as `title`, 
DATE_FORMAT(datetime,'%Y-%m-%dT%H:%i:%s') as `start`, 
DATE_FORMAT(date_add(datetime, Interval 599 SECOND),'%Y-%m-%dT%H:%i:%s') as end, 
clinic_id, 
clinic_location_id ");
$this->db->where('doctor_user_id', $user_id);
$this->db->where('datetime >=', mysql_user_to_gmt_date($start_datetime));
$this->db->where('datetime <=', mysql_user_to_gmt_date($end_datetime));
$this->db->where('status', 'available');
$this->db->order_by('datetime ASC');
$query = $this->db->get('schedule_records');
return $query;  
}

点火器 3.1.4 控制器：

....

$query = $this->appointment_model->get_available_dates_in_range($userid, $startdate, $enddate);
$this->json_response($query->result_array());

编码并返回 JSON 函数

function json_response($message = null, $code = 200) {
// clear the old headers
header_remove();
// set the actual code
http_response_code($code);
// set the header to make sure cache is forced
header("Cache-Control: no-transform,public,max-age=300,s-maxage=900");
// treat this as json
header('Content-Type: application/json');
$status = array(
200 => '200 OK',
400 => '400 Bad Request',
422 => 'Unprocessable Entity',
500 => '500 Internal Server Error'
);
// ok, validation error, or failure
header('Status: '.$status[$code]);
// return the encoded json
echo json_encode(array(
'status' => $code < 300, // success or not?
'message' => $message
));
}

events: [JSON.stringify(jsondata.message)]

在我看来很狡猾。你只是在制作一个包含巨大字符串的元素数组(因为JSON.stringify按照它所说的去做，并将你的对象变成一个字符串，而不再是一个可用的对象。它用于在屏幕上显示您的 JSON，而不是用于处理)。尝试

events: jsondata.message

相反。

虽然，实际上整个代码是错误的方式 - 这样做，当fullCalendar视图更改(即用户按下一个/上一个)时，你将不得不自己处理数据的更新。如果你使用fullCalendar的"events-as-a-function"，你可以使用自己的ajax代码，但让fullCalendar在需要获取新事件时再次处理查询服务器。

有关更多详细信息和示例，请参阅 https://fullcalendar.io/docs/event_data/events_function，但这就是我的做法：

$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: "/appointment/ajax_get_available_records",
type: "POST",
data:{
startdate: start.format("YYYY-MM-DD 00:00:01"),
enddate: end.format("YYYY-MM-DD 23:59:59"),
userid:<?= $doctor->user_id?>
},
error: function(jqXHR, textStatus, errorThrown) {
$('#errormsg').html("<p class='alert alert-danger'>There was an error while fetching calendar events!</p>'");
console.log("Error fetching events: " + textStatus + errorThrown); //log the error for debugging
callback([]); //no data was retrieved, so send an empty array of events to fullCalendar
},
success: function(jsondata, status, xhr){
callback(jsondata.message); //sends the events to fullCalendar
},
dataType: "json" 
});
},
color: 'green',
textColor: 'white' 
});

这样，如果用户按下一个或上一个，或以其他方式更改显示的视图或日期范围，fullCalendar 将自动调用"事件"中定义的函数，并提供正确的开始/结束日期，并将事件提取到日历中。

昨晚我找到了自己的答案。显然我的 JSON 数据已被缓存。清除浏览器缓存并重新启动服务器解决了我的问题(在删除了我放入测试的 JSON.stringify 之后。

相关内容

最新更新

热门标签：