将z索引添加到FullCalendar中的周行

Question

我试图添加事件的详细下拉列表，但它们被下一行截断了。

是否要在月度视图中设置每周行（.fc行）的z索引，以便每个后续行都有较低的z索引？即第一周的z指数为9，第二周的z索引为8等。

Answer 1

根据标记，这可以使用javascript/jQuery:来完成

for (var i = 0; i < $("tr.fc-row").length; i++) {
   $(".fc-row:eq(" + i + ")").css("z-index", ($("tr.fc-row").length - i));
}

这适用于页面上的所有.fc-row都应该获得较低的z索引的情况；如果这只适用于具有特定类（例如.fc-month或.fc-table）的特定容器中的所有.fc-row，则可以在脚本中轻松调整。

更新：关于z索引值在更改视图时重置/删除的后续问题-我刚刚查看了文档并找到了解决方案。可以添加eventAfterAllRender-回调-http://fullcalendar.io/docs/event_rendering/eventAfterAllRender/-设置为当前设置
例如，初始化完整日历时：

$('#calendar').fullCalendar({
  /* your current settings */
  eventAfterAllRender: function()
  {
    for (var i = 0; i < $("tr.fc-week").length; i++) {
     $(".fc-week:eq(" + i + ")").css("z-index", ($("tr.fc-week").length - i));
    }
  }
});

eventAfterAllRender在视图完全渲染时被调用，因此只需要在此处添加函数，它将为第一个视图和视图更改时添加z索引值。

刚刚创建了一个Fiddle示例：当您使用web开发工具检查行时，您会注意到将为每周行设置的z索引值，最初也是在将视图更改为上个月或下个月时设置的。

尽管这看起来像预期的那样工作，但最好只在月份视图更改时调用此函数-还有另一个回调viewRender-http://fullcalendar.io/docs/display/viewRender/-这就是

当呈现新的日期范围或视图类型时触发交换机

虽然我还没有测试过它，但文档中提到这个回调接受ViewObjects作为参数，ViewObjects的属性name是可用视图之一，例如month。但也许建议的使用eventAfterAllRender的方法已经对您有效了。

作为参考：http://fullcalendar.io/docs/display/viewRender/

还更新了z索引值的设置，以前的版本是递增的，而不是为第一行设置最高值并递减。