FullCalendar $（'td.fc-day'）。mouseover有时会在小月历上得到错误的日期 [英] FullCalendar $('td.fc-day').mouseover sometimes get wrong date on small month calendar

问题描述

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

To implement tooltips for my very small month calendar using fullCalendar, I used the following code to capture the mouse cursor entering a day on the calendar, and log to the console the date using data-date attribute for the fc-day class:

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

当我通过日期单元格移动光标时，日志窗口中的报告日期始终更改为约会前一周的日期，当时我明显还在同一个牢房。

As I move the cursor thru a date cell, the reported date in the log window consistently changes to the date one week prior to the date I'm on, when I'm clearly still in the same cell. The position in is the cell where the reported date is wrong is in the left middle.

当我将日历放大时，我不会遇到问题，只有当这个问题发生时，它相当小（宽度200px）。

When I make the calendar larger, I don't have the problem, only when its quite small (200px in width).

我得到了与dayClick相同的问题

I get the same problem with 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示例。

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

You need to have a console window open to view the 'output'.

推荐答案

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

Here is the solution I eventually used:

$('.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 class），因为原来的问题依然存在 - 悬停在fc-day div上有时会给你错误的日期，但是悬停在fc-day-number上并且获得最近的fc-day总会给你正确的日期。如果我将鼠标悬停在与显示的最后一天不同的fc日上，并隐藏我的工具提示，并等待用户在显示下一个工具提示之前将鼠标悬停在另一个fc天数上。如果日历更大，这将是一个问题，但如果日历更大，我再也不会遇到fc日给出错误日期的问题。

I only start showing the tooltip if hovering over the numbers (i.e. fc-day-number class), because the original problem still exists - hovering over the fc-day div still sometimes gives you the wrong date, but hovering over fc-day-number and getting the closest fc-day always gives you the right date. I hide my tooltips if I hover over an fc-day that has a different day than the last day that I display, and wait for the user to hover over another fc-day-number before showing the next tooltip. If the calendar were bigger, this would be a problem, but then again if the calendar were bigger, I wouldn't get the problem with fc-day giving the wrong date.

这篇关于FullCalendar $（'td.fc-day'）。mouseover有时会在小月历上得到错误的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！