如何获取事件信息并将其显示在 FullCalendar.js 的工具提示中？答案

【问题标题】：How to get the event information and have it display in a tooltip in FullCalendar.js?如何获取事件信息并将其显示在 FullCalendar.js 的工具提示中？
【发布时间】：2018-02-23 14:49:35
【问题描述】：

为了进一步解释，

我正在使用 FullCalendar 插件 (http://fullcalendar.io/)。每当我将鼠标悬停在一个事件上时，我希望事件信息（标题、日期、时间等）显示在工具提示中。

我有点搞定了，但只显示活动标题。

如何使日期和时间也显示？

提前致谢！

这是我目前得到的：

$(document).ready(function() {

    $('#calendar').fullCalendar({
        // put your options and callbacks here

        height: 'auto',
        timeFormat: 'h:mm',
        /*eventClick: function(calEvent, jsEvent, view){
            window.location = "http://www."
        }*/

        events: [
            {
                title : 'Pizza Cooking Class',
                start : '2015-11-12T09:00', // Year, Month, Day + Time
                color : '#00adef', // Label color
                textColor : '#FFF', // Text color
                category : '1',
                url : 'cookingclass.php'
            }
        ],
        eventRender: function eventRender(event, element, view ) {
        return ['all', event.category].indexOf($('#category-select').val()) >= 0
        },  

        eventMouseover: function(calEvent, jsEvent, view) {
            var tooltip = '<div class="tooltipevent" style="width:200px;height:50px;background:#fff;position:absolute;z-index:10001; padding:20px; border:1px solid rgba(0,0,0,0.1);">' + calEvent.title + '</div>';
            $("body").append(tooltip);
            $(this).mouseover(function(e) {
                $(this).css('z-index', 10000);
                $('.tooltipevent').fadeIn('500');
                $('.tooltipevent').fadeTo('10', 1.9);
            }).mousemove(function(e) {
                $('.tooltipevent').css('top', e.pageY + 10);
                $('.tooltipevent').css('left', e.pageX + 20);
            });
        },

        eventMouseout: function(calEvent, jsEvent, view) {
            $(this).css('z-index', 8);
            $('.tooltipevent').remove();
        }

    });

})

【问题讨论】：

标签： javascript jquery fullcalendar

【解决方案1】：

eventMouseover: function(calEvent, jsEvent, view) {
    var jsDate = new Date(jsEvent.timeStamp * 1000);
    console.log(jsDate.toDateString())
    var tooltip = '<div class="tooltipevent" style="width:200px;height:50px;background:#fff;position:absolute;z-index:10001; padding:20px; border:1px solid rgba(0,0,0,0.1);">' + calEvent.title + '<br>' + jsDate.toDateString() + '</div>';
    $("body").append(tooltip);
    $(this).mouseover(function(e) {
        $(this).css('z-index', 10000);
        $('.tooltipevent').fadeIn('500');
        $('.tooltipevent').fadeTo('10', 1.9);
    }).mousemove(function(e) {
        $('.tooltipevent').css('top', e.pageY + 10);
        $('.tooltipevent').css('left', e.pageX + 20);
    });
}

试试这个。

【讨论】：

嘿，真棒，你的答案可以得到日期和时间！但是日期和时间是错误的，它们不是事件的日期和时间。对不起，但我如何让它得到正确的日期和时间？再次感谢！真的很感激！
calEvent.start 将是事件的开始日期/时间。 fullcalendar 的网站has an example 也使用 qtip2 来做工具提示 here's a fiddle
非常感谢！！！我现在使用“calEvent.start”让它工作。非常感谢。干杯！

【解决方案2】：

我使用了@guradio 的答案中给出的代码，但发现工具提示仅在事件文本上方显示。

我将代码修改为以下似乎运行良好，并且当鼠标进入事件的任何部分时都会触发工具提示。

eventMouseover : function(calEvent, jsEvent) {
    $('.tooltipevent').remove();
    var tt = $(getTooltip(calEvent));
    $("body").append(tt);
    $(tt).hide();
    $(tt).fadeTo('1000', 0.9);
    $(tt).position({
        my: "left top",
        at: "left bottom",
        of: $(this),
        collision: "fit"
    });
},

eventMouseout : function(calEvent, jsEvent) {
    $('.tooltipevent').remove();
}

【讨论】：