Question

要使用fullCalendar实现我的小月历的工具提示，我使用以下代码捕获日历上输入一天的鼠标光标，并使用fc-day类的data-date属性登录控制台日期：

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

当我将光标移动到日期单元格时，日志窗口中的报告日期会一直变为我日期前一周的日期，此时我仍然在同一个单元格中。位置in是报告日期错误的单元格位于左中间。

当我将日历放大时，我不会遇到问题，只有当它非常小（宽度为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。

您需要打开一个控制台窗口才能查看＆＃39;输出＆＃39;。

Answer 1

我认为发生这种情况是因为你并没有真正徘徊在过去的一天。在每天的细胞之上还有另一个元素 - 一个＆＃39; fc-day-number＆＃39;。所以基本上你没有为这个元素做任何鼠标悬停动作。试试这个：

$('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日，并等待用户将鼠标悬停在另一个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个日历

FullCalendar $（＆＃39; td.fc-day＆＃39;）。mouseover有时会在小月历上出错日期

3 个答案: