Question

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

我需要我的日历告诉我当我在weekView或dayView中悬停指定的单元格时的时间。现在我指出日历这次显示的时间，但在viewRender方法中使用此代码只能在整行中显示：

fetchedResultsController

以下是我的代码：socket.io

任何人都知道如何在每个指定的一周内在单元格中显示此内容。

Answer 1

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

首先，我的fullcalendar对象命名为＆＃34; semaine＆＃34;。（我是法国人......）我正在使用＆＃39;议程＆＃39;视图（显示一周的所有日期）

这是我的fullcalendar对象的定义： $('#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;
}

你可以肯定地提高它，但它可以为你提供基本需求......

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

1 个答案: