Question

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

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

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

我尝试过[jsondata.message]和jsondata.message。我尝试将JSON数据解析为标准数组并将数组传递给事件项。我没有做任何事情来复制响应并将其粘贴到事件中：双引号中的元素可以工作。

ajax call工作并返回数据。
因为我可以将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;  
}

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

Answer 1

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

我看起来很狡猾。你只是在其中创建一个包含巨大字符串的元素的数组（因为JSON.stringify执行它所说的内容，并使你的对象成为一个字符串，而不再是一个可用的对象。它是用于在屏幕上显示您的JSON，而不是用于处理）。试试

events: jsondata.message

代替。

虽然，这整个代码实际上是错误的方式 - 这样做你必须自己处理fullCalendar视图更改（即用户按next / prev）时的数据更新。如果你使用fullCalendar＆＃34;事件作为一个功能＆＃34;您可以使用自己的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将自动调用＆＃34; events＆＃34;中定义的函数。使用正确的开始/结束日期并将事件提取到日历中。

Answer 2

昨晚我找到了自己的答案。显然我的JSON数据已被缓存。清除浏览器缓存并重新启动服务器修复了我的问题（删除了我为测试而放入的JSON.stringify。

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

2 个答案: