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