在 fullcalendar 中添加事件悬停文本

Question

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

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

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

});

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

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 超过：

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

希望这可以帮助你

Answer 2

没有引导程序，只需添加浏览器工具提示就更简单了

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

Answer 3

如果您使用的是引导程序，这是非常优雅的解决方案：

 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>

Typescript：

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

Answer 7

在日历选项中，我将其用于我的 angular 项目：

eventMouseEnter: function (calEvent) {
    calEvent.el.title = calEvent.event.title;
},

Answer 8

如果您使用的是 fullcalendar 版本 5：

eventMouseEnter：函数（信息）{info.el.title = info.event.start;}，