jquery - FullCalendar 在悬停时在单元格中显示时间

Question

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

当我将鼠标悬停在 weekView 或 dayView 中的指定单元格时，我需要我的日历显示现在几点。现在我要指出这次日历何时显示我，但只在整行中使用 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

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

首先，我的全日历对象被命名为“semaine”。 (我是法国人...)我正在使用“议程” View (显示一周中的所有日子)

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

就在这个定义之后，我重写了这三个回调函数:

$('#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;
}    

你当然可以改进它，但它可以为你提供满足你需要的基础......