javascript - 将 z-index 添加到 FullCalendar 中的周行

Question

我正在尝试添加事件的详细下拉列表，但它们被下一行 chop 。

是否有办法在月 View 中设置每周行(.fc-row)的 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-index 的情况；如果这只适用于具有特定类的特定容器中的所有 .fc-row，例如.fc-month 或 .fc-table，这可以在脚本中轻松调整。

更新:对于更改 View 时 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 每当 View 完全渲染时就会被调用，因此只需在此处添加该函数，它将为第一个 View 以及每当 View 更改时添加 z-index 值。

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

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

triggered when a new date-range is rendered, or when the view type switches

虽然我还没有测试过它，但文档提到此回调接受 ViewObjects 作为参数，其中 ViewObjects 具有一个属性 name是可用的 View 之一，例如月。但也许使用 eventAfterAllRender 的建议方法已经适合您。

引用:http://fullcalendar.io/docs/display/viewRender/

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