全日历在悬停时在单元格中显示时间

Question

我正在尝试 fullcalendar.io 小功能中实现。

我需要我的日历显示当我将指定的单元格悬停在周视图或日视图中时是几点。现在，我开始指出日历何时显示我这个时间，但仅在整行中使用 viewRender 方法中的以下代码：

$('#calendar').find('.fc-slats').find('[class="fc-widget-content"]').hover(
function() {
    var tr = $(this).parent();
    var time = tr.find('td.fc-axis.fc-time.fc-widget-content').find("span").text();
    $(this).append('<td class="temp_cell" style="border: 0px; width:5px;">'+time+'</td>');
},          
function() {                        
    $(this).children('.temp_cell').remove();
});

这是我的代码：jsfiddle.net/przemekp/w71rd9yz/

任何人都可以知道如何在每个指定的日期每周在单元格中显示它。

Answer 1

我也是，我一直在寻找一种实现此功能的方法。经过数小时的编码和大量的尝试/错误，这是我的技术：

首先，我的 FullCalendar 对象名为"Semaine"。(我是法国人...我正在使用"议程"视图(显示一周中的所有日子(

这是我的完整日历对象的定义： $('#semaine').fullCalendar({ ... select: function(ehDeb, ehFin, jsEvent, vue) { eraseAllCellTime($('#semaine')); .... }, eventMouseover: function(event, jsEvent, view) { eraseAllCellTime($('#semaine')); },
.... });

在这个定义之后，我覆盖了这三个回调函数：

$('#semaine').find('.fc-slats').find('[class="fc-widget-content"]').mouseover(
    function(mouseEvent) {
        displayCellTime($('#semaine'), this, mouseEvent);
    }
);
$('#semaine').find('.fc-slats').find('[class="fc-widget-content"]').mouseenter(
    function(mouseEvent) {
        displayCellTime($('#semaine'), this, mouseEvent);
    }
);
$('#semaine').mouseleave(
    function() {
        eraseAllCellTime($('#semaine'));
    }
);

现在有两个函数：

function eraseAllCellTime(calendar) {
    calendar.find('.fc-slats').find('[class="fc-widget-content"]').each(function() {
        $(this).empty();
    });
}
function displayCellTime(calendar, tdAllDays, mouseEvent) {
    // We remove all td cell contents
    eraseAllCellTime(calendar);
    // and we display the good cell
    var tr = $(tdAllDays).parent();
    var time = tr.find('td.fc-axis.fc-time.fc-widget-content').find("span").text();
    var dayColumns = calendar.find('th.fc-day-header');
    var html = '<table class="dailycolumncutting">';
    html += '<tr>';
    var mouseX = mouseEvent.clientX;
    var mouseY = mouseEvent.clientY;
    for(var d = 0; d < dayColumns.size(); d++) {
        var day = $(dayColumns[d]);
        var offset = day.offset();
        var width  = day.width();
        if (mouseX >= offset.left && mouseX <= offset.left+width) {
            html += '<td class="hovered">' + day.data("date") + '<br />' + time + '</td>';                            
        } else {
            html += '<td>&nbsp;</td>';
        }
    }
    html += '</tr>';
    html += '</table>';
    $(tdAllDays).empty();
    $(tdAllDays).append(html);
}

最后，CSS定义：

.dailycolumncutting td {
    width: 100%;
}
.dailycolumncutting td.hovered {
    text-align: center;
    background-color: #ff000055;
}    

您当然可以改进它，但它可以为您提供满足您需求的基本知识......