Fullcalendar v5 cabeza pegajosa en combinación con Bootstrap navegación superior fija

Question

Estoy probando la última versión de fullcalendar 5.4.0. Estoy usando el calendario dentro de bootstrap 4 página web, que tiene navegación fija en la parte superior. El problema es, cuando trato de establecer stickyHeaderDates, que debe fijar la barra de herramientas de cabecera del calendario en la parte superior al desplazarse por la página. En realidad está funcionando, sin embargo la barra de herramientas de encabezado calendario sólo se pega a la parte superior de la página, que está detrás de la barra de navegación de arranque, por lo que no es visible. Así que mi pregunta es, cómo pegar el encabezado del calendario a la parte superior del elemento padre, por ejemplo padre div, en lugar de arriba de la página? Aquí está mi código actual: html TEST Bootstrap core CSS fullcalendar scheduler 5.4.0 https://www.jsdelivr.com/package/npm/fullcalendar-scheduler body { padding- top: 54px; } #calendar { max-width: 1100px; margin: 40px auto; } This is my fiexd header, I would like to stick fullcalendar dates toolbar beneeth it. Page Content fullcalendar scheduler 5.4.0 https://www.jsdelivr.com/package/npm/fullcalendar-scheduler 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(); });

codergeek24 · Accepted Answer

.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* { top: 80px; } Puede añadir .fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky* al archivo css y debe ir bien ver versión fija en https://codepen.io/igolus/pen/rNYLOVo

Gpt · Answer

Para fijar el encabezado del calendario a la parte superior de un elemento padre en lugar de en la parte superior de la página, puedes encapsular el calendario dentro de un contenedor con posición relativa y establecer el encabezado del calendario con posición absoluta en relación al contenedor. Aquí tienes una versión modificada de tu código que muestra cómo hacerlo: html TEST body { padding-top: 54px; } calendarContainer { position: relative; max- width: 1100px; margin: 40px auto; } calendar { height: 700px; / Ajusta la altura según tu diseño / } calendar .fc-toolbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; } This is my fixed header, I would like to stick FullCalendar dates toolbar beneath it. 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, stickyHeaderDates: true, // activa el sticky header slotDuration: '00:05:00', dayMinWidth: 150 }); calendar.render(); }); En este código, se ha añadido un contenedor div con id calendarContainer, dentro del cual se encuentra el elemento div con id calendar. La barra de herramientas del calendario tiene una posición absoluta para fijarse en la parte superior dentro del contenedor. Ajusta el tamaño y la posición según tus necesidades de diseño. Espero que esta solución te haya sido de ayuda. ¡Déjame saber si tienes alguna otra pregunta!

Gemini · Answer

Para hacer que el encabezado de fullcalendar se adhiera a la parte superior del elemento padre, debes utilizar la propiedad stickyHeaderDatesContent en lugar de stickyHeaderDates.

Aquí tienes el código actualizado:

javascript
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
stickyHeaderDatesContent: true, // sticks the header to the top of the parent element

La propiedad stickyHeaderDatesContent acepta un valor booleano. Cuando se establece en true, el encabezado del calendario se adhiere a la parte superior del elemento padre, en este caso, el div con el ID calendar.

Ten en cuenta que es posible que también debas ajustar la altura del elemento padre para asegurarte de que haya suficiente espacio para el encabezado del calendario.

Respondida el Dec 18, 2020 a las 15:07 - por Gemini

Fullcalendar v5 cabeza pegajosa en combinación con Bootstrap navegación superior fija

3 Respuestas: