jquery - 在议程周+完整日历的一个单元格上的悬停效果

Question

嗨，我正在使用 Adam Shaw 的 FullCalendar ( http://arshaw.com/fullcalendar/ )。我正在使用一个月和议程周视图。当用户将鼠标悬停在月视图中的日期或议程周视图中的时间段上时，我想设置悬停效果。我试图改变css如下：

.fc-widget-content:hover {
        background-color: red;
    }

这适用于月视图。附加文件

但是，当我只需要突出显示一个时间段时，相同的代码会选择议程周视图中的整行。

下面的示例图片显示了每天突出显示的整个下午 1:00 时段，而不是鼠标光标所在的星期三 02-01 中的时段。

任何想法如何实现这一目标。

非常感谢。

Answer 1

您并不孤单：FullCalendar 的许多用户希望看到开箱即用支持的单个时间段的突出显示。Google Code 上有一个问题。

该问题源于 2009 年 10 月，因此我们似乎不应该抱有太大希望，但一些用户提出了不同的解决方法。其中之一在我的代码中成功运行，因此可能值得一试。

Answer 2

this is not something that can be achieved with just css. the issue is that the week grid is being created by superimposing two tables together, both with no background, therefore giving the impression of a grid, but not a true grid. the lengthwise portion of the grid is the higher z-index, so it will always appear on top, and therefore no hover event will ever fire for the height. I played around with ways to trick the user in to seeing the box as highlighted, however, without the ability to know where you are vertically in the grid, it's not really possible. it may be something that could be done with jquery, but i would think the effort involved would not be worth it.

Answer 3

将此代码粘贴到 $('#calendar').fullCalendar( ... ); 之后 这将在表中创建附加 TD :)

$("table.fc-agenda-slots th").each(function () {
    $(this).width(50);
});
$("table.fc-agenda-slots td.fc-widget-content").each(function () {
    $(this).width(($("table.fc-agenda-days thead th.fc-col0").width()));
    $(this).after("<td class=\"fc-widget-content\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col5").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col4").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col3").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col2").width() + "px\"><div style=\"position:relative\"></div></td>");
    $(this).after("<td class=\"fc-widget-content\" style=\"width:" + $("table.fc-agenda-days thead th.fc-col1").width() + "px\"><div style=\"position:relative\"></div></td>");
});

这是悬停的样式 css：

table.fc-agenda-slots td.fc-widget-content
{
    border-right: 1px #DDD solid;
}
table.fc-agenda-slots td.fc-widget-content:hover
{
    background-color: #F1F1F1;
}

Answer 4

在日历加载后添加：

$("table.fc-agenda-slots td.fc-widget-content div").each(function () {
                $(this).html("<table cellspacing=\"0\" style=\"width:100%\"><tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></table>");
            });

Answer 5

也许 css3 属性pointer-events:none可以帮助你。你可以在这里看到一个演示：http: //jsfiddle.net/rNWpz/

HTML

<div id="a"></div>
<div id="b"></div>

CSS

#a {
    border:1px dashed red;
    width:100px;
    height:100px;
}

#b {
    border:1px dashed blue;
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}

jQuery

$('#a').hover(function() {
    $(this).css('backgroundColor','red');
  },
  function () {
    $(this).css('backgroundColor','white');
  }
);