fullCalendar Ereignisse von Ajax Antwort nicht geladen

Question

Eine weitere Frage zu Ajax und FullCalendar. Ich habe die zuvor vorgeschlagenen Korrekturen hier gelesen und ausprobiert, aber alles ohne Erfolg. Ich kann JSON-Ereignisse nicht in fullCalendar laden. Was mache ich falsch?

Der Aufruf von $ .ajax funktioniert und gibt Werte zurück. Der JSON hat ein Elternelement und die Daten des Kalenderarrays befinden sich tatsächlich in jsondata.message. Die JSON.stringify im folgenden Code ist Teil meiner verschiedenen Experimente.

Ich habe ursprünglich versucht, den FullCalendar eventSource mit dem integrierten Ajax-Abruf zu verwenden. Ich trennte den Code, der dachte, dass ich Anruf-/Kommunikationsproblem hatte.

Ich habe versucht [jsondata.message] und nur jsondata.message. Ich habe versucht, die JSON-Daten in ein Standardarray zu analysieren und das Array an das Ereigniselement zu übergeben. Nichts, was ich tue, ohne die Antwort zu kopieren und in die Ereignisse einzufügen: Element in Anführungszeichen funktioniert.

1. Ajax Anruf funktioniert und gibt Daten zurück.
2. da ich die Daten von der Ajax-Antwort in den Code kopieren und einfügen kann, laden die Ereignisse, es ist nicht das Format der Daten.

Könnte es ein Limit für das Laden von Ereignissen geben? Es gibt ungefähr 4800 Ereignisse, die ich versuche zu laden.

AJAX-Aufruf:

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

Antwortheader

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 

** Teil AJAX Antwort **

{"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 ---- 

Server PHP 7.0/MySQL Modell:

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()); 

Encode und Rückkehr JSON Funktion

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

sieht mir zweideutig. Du machst gerade ein Array aus einem Element mit einer riesigen Zeichenkette (weil JSON.stringify das tut, was es sagt, und macht dein Objekt zu einer Zeichenkette und nicht mehr zu einem verwendbaren Objekt. Es ist dafür gedacht, deine JSON auf dem Bildschirm anzuzeigen, nicht zum Bearbeiten). Versuchen Sie

events: jsondata.message 

stattdessen.

Obwohl, wirklich ist dieser ganze Code falsch herum - so tun Sie dies müssen Sie die Aktualisierung von Daten selbst wenn die FullCalendar Ansicht ändert sich ändern (d. H. Benutzer next/prev).Wenn Sie fullCalendar "events-as-a-function" verwenden, können Sie Ihren eigenen Ajax-Code verwenden, aber fullCalendar kann den Server erneut abfragen, wenn neue Ereignisse abgerufen werden müssen.

Siehe https://fullcalendar.io/docs/event_data/events_function für weitere Details und Beispiele, aber das ist, wie ich es tun würde:

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

diese Weise, wenn ein Benutzer nächste oder vorherige drückt oder auf andere Weise ändert sich die Ansicht oder Datumsbereich angezeigt werden , fullCalendar ruft automatisch die in "events" definierte Funktion mit den korrekten Start-/Enddaten auf und holt die Ereignisse in den Kalender.

Answer 2

Ich fand meine eigene Antwort auf diese letzte Nacht. Anscheinend wurden meine JSON-Daten zwischengespeichert. Löschen meines Browser-Cache und Neustart des Servers behoben mein Problem (nach dem Entfernen der JSON.stringify, die ich zum Testen eingegeben hatte.