Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top.
The issue arises when attempting to set stickyHeaderDates, aiming to keep the calendar header toolbar fixed at the top while scrolling down the page.
Although it is functional, the calendar header toolbar sticks to the top of the page behind the bootstrap navigation bar, rendering it invisible.
Hence, my query is how to affix the calendar header to the top of the parent element, such as a parent div, rather than the top of the entire page?
Below is the snippet of my current code:
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0b1801010e0c010803090c1f401e0e0508091801081f2d584359435d">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee889b82828d8f828b808a8f9cc39d8d868b8a9b828b9caedbc0dac0de">[email protected]</a>/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>