同じIDを持つ定期的なイベントのツールチップの説明

Question

同じイベントIDを持つ定期的なイベントのeventmouseoverイベントで、イベントの説明付きのツールチップを表示したいのですが、実際の説明をjsonはイベントの最初の発生をフィードします。

これを行う理由は、イベントの説明に時間がかかることがあり、まったく同じ段落を100回以上ロードしてアクセスするだけでネットワーク経由で送信する必要がないためです最初のオカレンスの説明を表示し、その上にマウスを重ねると繰り返しイベントのツールチップに表示されます。

$('#calendar').fullCalendar({ 
header: { 
left: 'prev,next today', 
center: 'title', 
right: 'month,agendaWeek,agendaDay' 
}, 
editable: false, 
allDayDefault: false, 
events: "https://json_feed_url", 
eventMouseover: function(e,m){ 
    var tPosX = m.pageX - 5 ; 
    var tPosY = m.pageY + 20 ; 
    $('#tooltip').css({top: tPosY, left: tPosX, display: 'block'}); 
    var tt = ''; 
    tt += e.id+'<br />'; 
    $('#tooltip').html(tt); 
}, 
eventMouseout: function(){ 
    $('#tooltip').css({display: 'none'}); 
}, 
loading: function(bool){ 
    if (bool) $('#loading').show(); 
    else $('#loading').hide(); 
} 
}); 

と私のJSON形式のデータフィードはそうのようになる：

マイカレンダーの初期化コードがある

[ 
{ 
    "id": 0, 
    "title": "Study Hall", 
    "start": "2012-01-09T15:00", 
    "end": "2012-01-09T16:15", 
    "color": "green", 
    "description": "Discuss formal language theory and abstract machines" 
}, 
{ 
    "id": 0, 
    "title": "Study Hall", 
    "start": "2012-01-11T15:00", 
    "end": "2012-01-11T16:15", 
    "color": "green", 
    "description": "" 
}, 
{ 
    "id": 0, 
    "title": "Study Hall", 
    "start": "2012-01-16T15:00", 
    "end": "2012-01-16T16:15", 
    "color": "green", 
    "description": "" 
}, 
{ 
    "id": 0, 
    "title": "Study Hall", 
    "start": "2012-01-18T15:00", 
    "end": "2012-01-18T16:15", 
    "color": "green", 
    "description": "" 
}, 
{ 
    "id": 0, 
    "title": "Study Hall", 
    "start": "2012-01-23T15:00", 
    "end": "2012-01-23T16:15", 
    "color": "green", 
    "description": "" 
}, 
{ 
    "id": 0, 
    "title": "StudyHall", 
    "start": "2012-04-25T15: 00", 
    "end": "2012-04-25T16: 15", 
    "color": "green", 
    "description": "" 
} 
] 

これは、イベントの最初の発生時に正常に動作しますが、残りの発生説明はすべてツールヒントで空白です。誰もが最初の発生を参照するための解決策を持っていますか？私は、ダイアログを使用してeventMouseOverで問題を解決し

おかげ

Answer 1

。適切な要素が設定されたダイアログボックスをセットアップし、必要に応じて適切な値を設定します。事前にこれらの値を設定しておくこともできます。 （私のコードには2つの異なるソースから取得された2つの異なるタイプの予定がありませんので、eventTypeはこの場合にテストされる "appt"です。

eventMouseover: function(calEvent, jsEvent, view){ 
    if(calEvent.eventType == "appt") 
     { 
     $('#eventDetails').dialog({title: calEvent.title}); 
     $('#eventDetails').dialog('open'); 
     var myDialogX = jsEvent.pageX + 10; 
     var myDialogY = jsEvent.pageY + 10; 
     $('#eventDetails').dialog('option', 'position', [myDialogX, myDialogY]); 
     $('#appointmentTypeName').append(calEvent.appointmentTypeName); 
     $('#appointmentReason').append(calEvent.appointmentReason); 
     $('#appointmentTime').append(calEvent.start); 
     $('#appointmentTitle').append(calEvent.appointmentTitle); 
     $('#appointmentFacility').append(calEvent.facilityName); 
     } 
     },