ajaxレスポンスのfullCalendarイベントはロードされません

Question

ajaxとfullCalendarに関するもう1つの質問です。私はここで以前に提案された修正を読み、試しましたが、役に立たないものです。 JSONイベントをfullCalendarにロードできません。私は間違って何をしていますか？

$ .ajax呼び出しが機能し、値を返しています。 JSONには親要素があり、カレンダー配列データは実際にはjsondata.messageにあります。以下のコードのJSON.stringifyは私の様々な実験の一部です。

私はもともと、組み込みのajax検索でfullCalendarイベントソースを使用しようとしました。私はコール/通信の問題を抱えていると思ってコードを分けた。

私は[jsondata.message]とjsondata.messageだけを試しました。私はJSONデータを標準配列に解析し、その配列をイベント項目に渡そうとしました。レスポンスをコピーしてイベントに貼り付けるのに手間がかかりません。二重引用符で囲まれた要素が機能します。

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

レスポンスヘッダ

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)] 

私にとって見えます。あなたはそれに巨大な文字列を持つ1つの要素の配列を作成しているだけです（JSON.stringifyはそのことを行い、オブジェクトを文字列にし、もはや使用可能なオブジェクトにしません）。処理のために）。代わりに

events: jsondata.message 

を試してください。

本当にこのコード全体が間違っていますが、フルカラーの表示が変更されたとき（つまりユーザーが次/前を押すとき）にデータの更新を処理する必要があります。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' 
}); 

この方法は、ユーザーが次または前押す、またはそれ以外の場合は表示されているビューまたは日付範囲を変更した場合fullCalendarは、自動的に「イベント」で定義された関数を正しい開始日/終了日で呼び出し、イベントをカレンダーにフェッチします。

Answer 2

私はこの最後の夜に私自身の答えを見つけました。どうやら私のJSONデータはキャッシュされていたようです。ブラウザのキャッシュをクリアしてサーバを再起動すると問題が解決しました（テストのために入れたJSON.stringifyを削除した後）