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

Question

另一个关于ajax和fullCalendar的问题。我已阅读并尝试了之前建议的修复方法，但均无济于事。我无法将 JSON 事件加载到 fullCalendar。我究竟做错了什么？

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

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

我已经尝试过[jsondata.message]并且只是jsondata.message。我尝试将 JSON 数据解析为标准数组并将该数组传递给事件项。除了复制响应并将其粘贴到 events: 双引号内的元素之外，我所做的任何事情都有效。

1. ajax 调用有效并返回数据。
2. 由于我可以将 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" 
});

响应 header

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

Codeigniter 3.1.4 Controller :

...

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

Answer 1

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

对我来说看起来很狡猾。您只是创建一个包含一个元素的数组，其中包含一个巨大的字符串(因为 JSON.stringify 执行它所说的操作，并使您的对象变成一个字符串，而不再是一个可用的对象。这意味着用于在屏幕上显示 JSON，而不是用于处理)。尝试一下

events: jsondata.message

相反。

尽管如此，整个代码实际上是错误的 - 这样做时，您必须自己处理 fullCalendar View 更改(即用户按下一个/上一个)时的数据更新。如果您使用 fullCalendar 的“事件即函数”，您可以使用自己的 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' 
});

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