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

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

2 个答案: