FullCalendar $（’td.fc-day’）。mouseover有时会在小月历上出错
为了使用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); });
有一个jsFiddle示例 。
您需要打开控制台窗口才能查看“输出”。
我认为这是因为你并没有真正徘徊在’fc-day’。 每天都有一个元素 – 一个’fc-day-number’。 所以基本上你没有对这个元素进行任何鼠标hover操作。 试试这个：
$('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'); })
安德烈希望它有所帮助
这是我最终使用的解决方案：
$('.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(); });
如果将鼠标hover在数字上（即fc-day-number类），我才会开始显示工具提示，因为原始问题仍然存在 – 将鼠标hover在fc-day div上仍有时会给出错误的日期，但是会在fc-day-上空盘旋数字并获得最接近的fc-day总能为您提供正确的日期。 如果我将鼠标hover在与我显示的最后一天不同的fc日，并等待用户将鼠标hover在另一个fc-day-number上，然后显示下一个工具提示，我就会隐藏我的工具提示。 如果日历更大，这将是一个问题，但如果日历更大，我将不会遇到fc-day给出错误日期的问题。
我只是看着同样的问题，我在这里提出的解决方案存在一些问题，即每天单元格的某些区域不会触发鼠标hover。 （ fc-day-number和fc-day之间存在小的差距，并且在同一行的不同单元格中存在事件的较大间隙）。
我提出了一个不同的解决方案，通过调整此问题的一些代码来请求此function： 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个日历