javascript - 在全日历中添加事件悬停文本

Question

我正在尝试在完整日历的月历页面中的事件上包含悬停文本。

我有数组对象声明需要在页面上由 php 脚本加载的事件。看起来如下:

$('#calendar').fullCalendar({
events: [
    {
        title  : 'event1',
        start  : '2010-01-01'
    },
    {
        title  : 'event2',
        start  : '2010-01-05',
        end    : '2010-01-07'
    }
]

});

我正在尝试使用 eventMouseover 函数在每个事件中包含悬停文本。这个函数的原型(prototype)如下: function( event, jsEvent, view ) { } 其中 event 是事件对象，jsEvent 是带有鼠标坐标等低级信息的原生 JavaScript 事件。 View 持有全日历的 View 对象。我无法正确调用此函数的参数。我的信息来自这里:http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/我对在每个事件上实现悬停文本的其他方法非常满意。谢谢。

Answer 1

您走在正确的轨道上。我做了类似的事情以在议程 View 中的事件底部显示事件结束时间。

日历上的选项:

eventMouseover: function(event, jsEvent, view) {
    $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-end\">'+$.fullCalendar.formatDate(event.end, 'h:mmt')+'</div>');
}

eventMouseout: function(event, jsEvent, view) {
    $('#'+event.id).remove();
}

悬停的 CSS:

.hover-end{padding:0;margin:0;font-size:75%;text-align:center;position:absolute;bottom:0;width:100%;opacity:.8}

希望对你有帮助!