如何獲取事件信息並將其顯示在FullCalendar.js的工具提示中？

Question

為了進一步解釋，

我正在使用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();
        }

    });

})

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

試試這個。

Answer 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();
}