FullCalendar $('td.fc-day').mouseover 有时会在小月历上出现错误的日期

Question

为了使用 fullCalendar 为我非常小的月历实现工具提示，我使用以下代码捕获鼠标光标在日历上输入日期，并使用 fc-day 类的 data-date 属性将日期记录到控制台：

$('td.fc-day').mouseover(function () {
  var strDate = $(this).data('date');
  console.log(strDate);
});

当我将光标移过一个日期单元格时，日志窗口中报告的日期会始终更改为我所在日期前一周的日期，而我显然仍在同一个单元格中。中的位置是报告日期错误的单元格在左中。

当我把日历变大时，我没有问题，只有当它非常小（宽度为 200 像素）时。

dayClick 遇到同样的问题

下面是代码：

$('#calendar').fullCalendar({
    header: false,
    aspectRatio: 1.5,
    weekMode: 'liquid',
    month: 7,
    year: 2013,
    dayClick: function (objDate, allDay, jsEvent, view) {
        var strDate = (objDate.getMonth() / 1 + 1) + '/' + objDate.getDate() + '/' + objDate.getFullYear();
        console.log(strDate);
    }
});
$('td.fc-day').mouseover(function () {
    var strDate = $(this).data('date');
    console.log(strDate);
});

<table>
    <tr>
        <td width="200px">
            <div id='calendar' style="font-size:small; cursor:default"></div>
        </td>
    </tr>
</table>

有一个jsFiddle example。

您需要打开一个控制台窗口才能查看“输出”。

Answer 1

我认为发生这种情况是因为您并没有真正将鼠标悬停在“FC 日”上。每天单元格顶部还有另一个元素 - 'fc-day-number'。所以基本上你只是没有这个元素的任何鼠标悬停动作。试试这个：

$('td.fc-day').mouseover(function() {
    var strDate = $(this).data('date');
    $(this).addClass('fc-highlight');
});
$('td.fc-day-number').mouseover(function() {
    var strDate = $(this).data('date');
    $("td.fc-day").filter("[data-date='" + strDate + "']").addClass('fc-highlight');
});
$('td.fc-day').mouseout(function() {
    $(this).removeClass('fc-highlight');
})
$('td.fc-day-number').mouseout(function() {
    var strDate = $(this).data('date');
    $("td.fc-day").filter("[data-date='" + strDate + "']").removeClass('fc-highlight');
})

希望对你有帮助， 安德烈

Answer 2

这是我最终使用的解决方案：

$('.fc-day-number').mouseover(function () {
    var sel = $(this).closest('.fc-day');
    var strDate_yyyy_mm_dd = sel.data('date');
    m_strDate_yyyy_mm_dd = strDate_yyyy_mm_dd;
    if (typeof strDate_yyyy_mm_dd === 'undefined') return;
    var position = sel.position();
    var offset = sel.offset();
    var objDate = new Date(strDate_yyyy_mm_dd.substring(0, 4),   strDate_yyyy_mm_dd.substr(5, 2) - 1, strDate_yyyy_mm_dd.substr(8,2))
    displayEventPopup(objDate, position, offset);
  });
  $('.fc-day').mouseover(function () {
    var strDate_yyyy_mm_dd = $(this).data('date');
    if (strDate_yyyy_mm_dd != m_strDate_yyyy_mm_dd)
        $('#calTooltip').hide();
  });

如果将鼠标悬停在数字上（即 fc-day-number 类），我只会开始显示工具提示，因为原始问题仍然存在 - 悬停在 fc-day div 上有时仍然会给您错误的日期，但悬停在 fc -day-number 并获得最接近的 fc-day 总能为您提供正确的日期。如果我将鼠标悬停在与我显示的最后一天不同的日期的 fc-day 上，我会隐藏我的工具提示，并等待用户将鼠标悬停在另一个 fc-day-number 上，然后再显示下一个工具提示。如果日历更大，这将是一个问题，但如果日历更大，我不会遇到 fc-day 给出错误日期的问题。

Answer 3

我只是在看同样的问题，我对这里提供的解决方案有一些问题，即每天单元格的某些区域不会触发鼠标悬停。 （fc-day-number 和 fc-day 之间的差距很小，而在同一行的不同单元格中有事件的地方差距更大）。

我想出了一个不同的解决方案，在这个问题上修改了一些代码来请求这个功能：https://github.com/fullcalendar/fullcalendar/issues/2718

当鼠标在一天单元格内时，此解决方案似乎更健壮，没有间隙，并且仅在鼠标移过单元格时触发 1 个进入和 1 个退出事件

let currentDay = undefined;

let dayFromCoordinates = (x, y) => {
    const days = $('.fc-day');
    for (let i = 0; i < days.length; i++) {
        const day = $(days[i]);
        const offset = day.offset();
        const width  = day.width();
        const height = day.height();
        const mouseOverDay = (
            x >= offset.left && x <= offset.left + width &&
            y >= offset.top && y <= offset.top + height
        );
        if (mouseOverDay) {
            return day;
        }
    }
};

$('.fc-view-container').mousemove(mouseEvent => {
    const newDay = dayFromCoordinates(mouseEvent.pageX, mouseEvent.pageY);
    if (currentDay && !currentDay.is(newDay)) {
        // remove styling/html from current day
    }
    if (newDay && !newDay.is(currentDay)) {
        // add styling/html to new day
    }
    currentDay = newDay;
});

请注意，此代码假定 DOM 中只有 1 个日历