Содержимое события Fullcalendar

Question

Я пытаюсь сделать содержимое внутри события в Fullcalendar липким.При прокрутке календаря содержимое событий должно быть видимым, если событие не находится вне поля зрения.

Я попробовал это с простым CSS, но это не работает, убедитесь сами:

.fc-event .fc-content {
  position:sticky;
  top:0;
}

https://codepen.io/snak3/pen/KZKNMd

У кого-нибудь есть идеи, как заставить это работатьили это не так просто?

Answer 1

Невозможно использовать position: sticky "из коробки", но вот пример того, как вы можете сделать это с помощью js (добавьте это в конец вашего скрипта):

const content = document.querySelectorAll('.fc-event .fc-content')[1];
const scroller = document.querySelector('.fc-scroller');
scroller.addEventListener("scroll", function() {
    if (scroller.scrollTop > 100) {             
        content.style.position = "fixed";
        content.style.top = "130px";
    }
    else {
        content.style.position = "unset";               
    }
});

Очевидно,Селектор и верхние значения очень специфичны.Вы можете использовать js для вычисления подходящего верхнего расстояния для каждого события и применять его для каждого прокрутки.Это большая работа, хотя.