文章/答案/技术大牛

发布

社区首页 >问答首页 >全日历v5粘性标头与引导带固定顶部导航相结合

问全日历v5粘性标头与引导带固定顶部导航相结合
EN

Stack Overflow用户

提问于 2020-12-17 14:56:56

回答 1查看 664关注 0票数 2

我正在测试最新版本的完整日历5.4.0。我使用的日历内的引导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>

css

twitter-bootstrap

fullcalendar

fullcalendar-5

html

回答 1

Stack Overflow用户

发布于 2022-02-02 18:51:11

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

您可以将css .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>*添加到css文件中，这样就可以了。

见https://codepen.io/igolus/pen/rNYLOVo上的固定版本

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65343105

复制

相似问题

问全日历v5粘性标头与引导带固定顶部导航相结合
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全日历v5粘性标头与引导带固定顶部导航相结合EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全日历v5粘性标头与引导带固定顶部导航相结合
EN