カレンダーの私のイベントは同じ日付のスタックですが、私のイベントの日付は異なります

Question

こんにちは皆、このカレンダーで立ち往生しています。 イベントをカレンダーに表示する必要があります。 1つのイベントしか表示されませんが、さらに2つのイベントがあると、同じ日付にイベントが保存されます。彼らは異なる日付を持っていますが。

<script th:inline="javascript"> 
/*<![CDATA[*/ 

var events = []; 
var myObject = new Object(); 
var theList = [[${appointments}]] 

$(document).ready(function(){ 

    for (var i = 0; i < theList.length; i++) { 
     myObject.title = theList[i].title; 
     myObject.start = new Date(theList[i].start); 
     myObject.requestNumber = theList[i].requestNumber; 
     myObject.locationId = theList[i].locationId; 
     myObject.arrivalTime = theList[i].arrivalTime; 
     myObject.admissionDate = new Date(theList[i].admissionDate); 
     myObject.procedureDate = "-"; 
     myObject.admittingDiagnosisDesc = theList[i].admittingDiagnosisDesc; 
     myObject.description = ""; 
     events.push(myObject); 
    } 

    $('#calendar').fullCalendar({ 
     defaultView: 'month', 
     header: { 
      left: '', 
      center: 'title' 
     }, 
     editable: false, 
     selectable: true, 
     events: events, 
     dayClick: function() { 
      // alert('a day has been clicked!'); 
     }, 
     eventClick: function(event, jsEvent, view) { 
      showAppointmentDetails(event) 
     } 
    }); 
}); 

/*]]>*/ 

これは私の出力（fullcalendar_events_are_stored_in_same_date）です：：

イベントが持っている

は、私はこれは私のjQueryのコード..です

をデータベース5月のイベントを検索しています開始日は異なるが、同じ日付に格納される。助けが必要です...

Answer 1

ループするたびにmyObjectを新しいオブジェクトとして再初期化する必要があります。そうしないと、ループが実行されるたびにメモリ内の同じオブジェクトを新しい値で上書きします。

オブジェクトはコピーではなく参照として配列に格納されるため、この配列がカレンダーに渡されると、配列内の項目が読み込まれ、それらがすべて同じものを参照するため、配列が同じであることがわかりますメモリ内のソースオブジェクト。それで、なぜあなたのすべてのイベントが同じ日にあるように見えますか？あなたがそれらを調べたならば、その日付だけでなく、すべてのプロパティが同じであることが分かります。

は単に代わりに、このようにそれを実行します。

for (var i = 0; i < theList.length; i++) { 
    var myObject = new Object(); //create a new object each time 
    myObject.title = theList[i].title; 
    myObject.start = new Date(theList[i].start); 
    myObject.requestNumber = theList[i].requestNumber; 
    myObject.locationId = theList[i].locationId; 
    myObject.arrivalTime = theList[i].arrivalTime; 
    myObject.admissionDate = new Date(theList[i].admissionDate); 
    myObject.procedureDate = "-"; 
    myObject.admittingDiagnosisDesc = theList[i].admittingDiagnosisDesc; 
    myObject.description = ""; 
    events.push(myObject); 
    } 

http://jsfiddle.net/sbxpv25p/50/は、実施例を示します。

しかし、すべてのことを言っていると、本当になぜループが必要なのかが分かりません。forとにかくあなたの出来事が主に正しいフォーマットであるという印象をコードから得ます。 descriptionとprocedureDateのほかに、デフォルト値をプッシュするだけで、ループは同じデータの正確なコピーを作成し、それを新しい配列に入れています。

"イベント"パラメータで "theList"をfullCalendarに直接入力して同じ結果を得ることができると思います。この例を参照してください：http://jsfiddle.net/sbxpv25p/51/