Fullcalendar v5 粘性标题与 Bootstrap 固定顶部导航相结合答案

【问题标题】：Fullcalendar v5 sticky header in combination with Bootstrap fixed top navigationFullcalendar v5 粘性标题与 Bootstrap 固定顶部导航相结合
【发布时间】：2022-02-03 02:51:11
【问题描述】：

我正在测试最新版本的 fullcalendar 5.4.0。我在 bootstrap 4 网页中使用日历，它在顶部有固定的导航。

问题是，当我尝试设置stickyHeaderDates时，它应该在向下滚动页面时修复顶部的日历标题工具栏。

它确实可以工作，但是日历标题工具栏只粘在页面顶部，位于引导导航栏的后面，因此不可见。

所以我的问题是，如何将日历标题粘贴到父元素的顶部，例如父 div，而不是页面顶部？

这是我当前的代码：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>TEST</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- fullcalendar scheduler 5.4.0 https://www.jsdelivr.com/package/npm/fullcalendar-scheduler -->
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.4.0/main.min.css' />

    <style>
        body {
            padding-top: 54px;
        }
        #calendar {
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

</head>

<body>

    <nav id="mynav" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" style="height:80px; z-index:-10;">
        <div class="container text-white">
            This is my fiexd header, I would like to stick fullcalendar dates toolbar beneeth it.
        </div>
    </nav>

    <!-- Page Content -->
    <div class="container content">

        <div id='calendar'></div>

    </div>

    <!-- fullcalendar scheduler 5.4.0 https://www.jsdelivr.com/package/npm/fullcalendar-scheduler -->
    <script type="text/javascript" src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.4.0/main.min.js'></script>

    <script>

        document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {

            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            timeZone: 'UTC',
            initialView: 'resourceTimeGridWeek',
            headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'resourceTimeGridWeek,resourceTimeGridDay'
            },
            resources: 'https://fullcalendar.io/demo-resources.json?max=4',
            events: 'https://fullcalendar.io/demo-events.json?with-resources=2&single-day',
            editable: true,
            selectable: true,

            height: 'auto', // will activate stickyHeaderDates automatically!

            slotDuration: '00:05:00', // very small slots will make the calendar really tall
            dayMinWidth: 150, // will cause horizontal scrollbars
        });

        calendar.render();
        });

    </script>

</body>
</html>

【问题讨论】：

你能展示一下你目前拥有的HTML吗
我已经用示例源代码更新了我的问题。
谢谢。 codepen.io/ADyson82/pen/NWRaKyw - 问题现场演示
有趣的是，如果你关闭 height:auto 仍然有类似的问题。我想知道这是否真的只是使用引导程序构建固定标头的方式的问题，而不是特定于 fullCalendar 的任何问题？
我也有同样的问题。你找到什么可行的方法了吗？

标签： html css twitter-bootstrap fullcalendar fullcalendar-5

【解决方案1】：

    .fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* {
        top: 80px;
    }

您可以将 .fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* 添加到 css 文件中，它应该没问题

在https://codepen.io/igolus/pen/rNYLOVo上查看固定版本

【讨论】：