Question

我试图在事件中添加详细信息下拉列表，但是它们会被下一行切断。

无论如何在每月视图中设置每周行（.fc-row）的z-index，以便每个子行具有较低的z-index？即第一周的z指数为9，第二周的指数为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-index;如果这只适用于具有特定类别的特定容器中的所有.fc-row，例如.fc-month或.fc-table，可以在脚本中轻松调整。

更新：有关更改视图时重置/删除z-index值的后续问题 - 我刚检查了文档并找到了解决方案。可以将eventAfterAllRender - 回调 - http://fullcalendar.io/docs/event_rendering/eventAfterAllRender/添加到您当前的设置中。
例如，在初始化fullcalendar时：

$('#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-index值。

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

虽然这看似按预期工作，但最好只在月视图更改时调用此函数 - 还有另一个回调viewRender - http://fullcalendar.io/docs/display/viewRender/ - 这是

在呈现新的日期范围时或视图类型时触发开关

虽然我还没有对其进行测试，但文档提到此回调接受ViewObjects作为参数，ViewObjects的属性name是可用视图之一，比如说月。但是，使用eventAfterAllRender建议的方法可能已经适合您。

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

同时更新了z-index值的设置，之前的版本正在递增，而不是设置第一行的最高值并递减。

在FullCalendar中将z-index添加到周行

1 个答案: