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;
}

Answer 3

如果您使用的是bootstrap，这是非常优雅的解决方案：

 eventRender: function(event, element) {
     $(element).tooltip({title: event.title});
 }

（我从这个答案中得到了它：https://stackoverflow.com/a/27922934/2941313）

Answer 4

对我来说，这就是我修改其他出色答案所需要的。

HTML：

(eventRender)="addHoverTitle($event)"

组件：

addHoverTitle(args: any): void {
   args.el.title = args.event.title;
}

Answer 5

在FullCalendar的第4版中，只有一个参数：eventRender：function（info），因此代码段为：

使用引导程序工作

eventRender: function (info) {
  $(info.el).tooltip({ title: info.event.title });
}

Answer 6

如果您使用的是 Angular

HTML：

<full-calendar 
 ...
 (eventLeave)="eventLeave($event)">
</full-calendar>

打字稿：

eventRender($event) {
  $event.el.title = $event.event.title;
}

在fullcalendar中添加事件hovertext

6 个答案: