在fullcalendar中添加事件hovertext

Question

我正在尝试在完整日历的月份日历页面中添加悬停文本.

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

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

});

我试图使用eventMouseover函数包含每个事件的悬停文本.此函数的原型如下所示:function(event,jsEvent,view){}其中event是事件对象,jsEvent是具有低级信息(如鼠标坐标)的本机JavaScript事件.并且视图包含fullcalendar的视图对象.我无法正确调用此函数的参数.我的信息来自这里:http://arshaw.com/fullcalendar/docs/mouse/eventMouseover/我对在每个事件上实现hovertext的其他方式非常酷.谢谢.

Answer 1

你走在正确的轨道上.我做了类似的事情,在议程视图中将事件结束时间显示在事件的底部.

日历上的选项:

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}

希望这对你有所帮助!

Answer 2

没有bootstrap,更简单的是只添加浏览器工具提示

eventRender : function(event, element) {
   element[0].title = event.title;
}