2016-06-15 10 views
0

Ich verwende Knockout und ich ziehe Ereignisse aus einem beobachtbaren Array. Meine Ereignisse werden in der Datei console.log angezeigt, aber der Kalender wird nicht gerendert. Wenn ich das Array aus der Datei console.log kopiere und fest codiere, wird der Kalender gerendert. Was ist der Unterschied. Wie kann ich dies beheben?fullcalendar v.2 Ereignisse Array mit Knockout

viewModel.calendarViewModel = new ko.fullCalendar.cModel({ 
    events: cModel.events, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: false, 
    viewDate: viewModel.viewDate 
}, viewModel); 

Ausschnitt aus console.log:

"calendarViewModel": { 
"events": [ 
    { 
    "id": 1304, 
    "title": "jjf2017_7_9-10", 
    "start": "2017-07-08", 
    "end": "2017-07-10", 
    "Location": "Guest House", 
    "backgroundColor": "Color", 
    "RoomNumber": "203" 
    }, 
    { 
    "id": 1298, 
    "title": "JulyTest", 
    "start": "2016-07-09", 
    "end": "2016-07-18", 
    "Location": "Guest House", 
    "backgroundColor": "Color", 
    "RoomNumber": "205" 
    }, 
    { 
    "id": 1299, 
    "title": "Julytest2", 
    "start": "2016-07-09", 
    "end": "2016-07-14", 
    "Location": "Guest House", 
    "backgroundColor": "Color", 
    "RoomNumber": "209" 
    },... 
+0

Bitte versuchen Sie eine [mcve] zu erstellen. – Jeroen

+0

Hier ist eine Geige: [link] http://jsfiddle.net/jjfrick/y58wjkkj/ Dieses Beispiel funktioniert in jsFiddle und meiner App (wenn das Array codiert ist), aber wenn ich meine Daten laden und es auf das Array schieben, ist nichts angezeigt, ohne Fehler mit dem Chrome-Entwickler-Tool. Meine App wird in unserem Intranet verwendet. – user3157885

Antwort

0

Wenn Sie eine Datenquelle haben, die zu ändern ist, könnten Sie using the events property as a function instead of an array versuchen, und dann fullCalendar (‚refetchEvents‘), wenn eine Änderung der Daten unter Verwendung von wird beobachtet. Hier ist ein Arbeitsausschnitt, den ich von einer Meteor App habe. Wenn sich der Mongo-Cursor, den ich beobachte, ändert, rufe ich .fullCalendar ('refetchEvents') auf, so dass die Kalenderanzeige aktualisiert wird. Im folgenden Beispiel erstelle ich eine Reihe von Terminen aus einer Mongo-Sammlung, führe eine kleine Verarbeitung durch und nutze dann den Rückruf, der die Ereignisse von FullCalendar in den Kalender stellt. Wenn sich die Datenquelle ändert (z. B. durch Hinzufügen eines Ereignisses über ein Formular), verwende ich fullCalendar ('refetchEvents') aus dem Erfolgsrückruf meines Formulars, um sicherzustellen, dass die Änderungen gerendert werden. ** Sie können möglicherweise 'refetchEvents' verwenden und nicht mit der Funktionsstruktur herumspielen, aber ich habe das in meinem Fall nicht getestet.

events(start, end, timezone, callback) { 
    const data = Appointments 
    .find() 
    .fetch() // <-- here's the array 
    // doing some array processing) 
    .map(appointment => { 
     appointment.editable = ! isPast(appointment.start); 
     return appointment; 
    }); 

    if (data) { 
    // fullCalendar parses the data and renders it on the cal. 
    callback(data); 
    } 
Verwandte Themen