FullCalendar 5，顶部菜单下有粘性资源，Bootstrap 4

Question

我希望能够将 Bootstrap 4 的粘性菜单与 Full Calendar 5 的粘性资源 headers 结合使用。向下滚动时，我希望 bootstrap 菜单保持在最顶部，紧随其后的是完整日历中的资源标题（即“房间 A”、“房间 B”等）。看起来 Full Calendar 确实具有粘性资源标题功能，但该功能仅粘在页面的最顶部并且由于 Bootstrap 菜单而不可见。

这是我目前所拥有的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" type="text/css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.5.1/main.min.css" rel="stylesheet" type="text/css" />


</head>

<body>

  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

  <main role="main" class="container">
    <div id='calendar'></div>
  </main>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
  <script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.5.1/main.min.js" type="text/javascript"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var calendarEl = document.getElementById("calendar");
      var calendar = new FullCalendar.Calendar(calendarEl, {
        themeSystem: "bootstrap",
        initialView: "resourceTimeGridDay",
        dayMinWidth: 200,
        height: "auto",
        resources: [
          { id: "a", title: "Room A" },
          { id: "b", title: "Room B" },
          { id: "c", title: "Room C" },
          { id: "d", title: "Room D" },
          { id: "e", title: "Room E" },
          { id: "f", title: "Room F" },
          { id: "g", title: "Room G" },
          { id: "h", title: "Room H" },
          { id: "i", title: "Room I" },
          { id: "j", title: "Room J" },
          { id: "k", title: "Room K" },
          { id: "l", title: "Room L" }
        ]
      });
      calendar.render();
    });
  </script>

</body>

</html>

这里有一个简单的 CodePen 给你看：https://codepen.io/bakerstreetsystems/pen/VwmoyJb

一直滚动到底部后，我希望它看起来像这样：

看到 Bootstrap 菜单如何位于最顶部，然后紧随其后的是资源标题（“房间 A”、“房间 B”等）？

如有任何帮助，我们将不胜感激！

Answer 1

更改粘性 table-header 的 top 偏移量以匹配 nav-bar 的高度。

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: "bootstrap",
    initialView: "resourceTimeGridDay",
    dayMinWidth: 200,
    height: "auto",
    resources: [{
        id: "a",
        title: "Room A"
      },
      {
        id: "b",
        title: "Room B"
      },
      {
        id: "c",
        title: "Room C"
      },
      {
        id: "d",
        title: "Room D"
      },
      {
        id: "e",
        title: "Room E"
      },
      {
        id: "f",
        title: "Room F"
      },
      {
        id: "g",
        title: "Room G"
      },
      {
        id: "h",
        title: "Room H"
      },
      {
        id: "i",
        title: "Room I"
      },
      {
        id: "j",
        title: "Room J"
      },
      {
        id: "k",
        title: "Room K"
      },
      {
        id: "l",
        title: "Room L"
      }
    ]
  });
  calendar.render();
});

.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* {
  top: 56px !important;
  z-index: 100;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.5.1/main.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.5.1/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
  <div id="calendar"></div>
</main>

FullCalendar 5，顶部菜单下有粘性资源，Bootstrap 4

FullCalendar 5 with Sticky Resources Under Top Menu with Bootstrap 4

css

twitter-bootstrap

fullcalendar-5