具有相同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": ""
}
]

这在事件的第一次出现时效果良好，但工具提示中其余的出现描述均为空白。有人有引用第一个事件的解决方案吗？

感谢

Answer 1

我使用对话框解决了eventMouseOver中的问题。我设置了一个对话框，其中包含适当的元素w/id的集合，然后根据需要设置适当的值。当然，您可以提前或在加载页面时设置这些值。（并不是说我的代码有两个不同类型的约会，来自两个不同的来源，所以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);
         }
         },