全日历活动内容置顶

Question

我正在尝试将全日历中的事件内容设为粘性。当您在日历中滚动时，只要事件不在视图之外，事件的内容就应该可见。

我用简单的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计算每个事件的适当顶部距离，并将其应用于每个滚动过程。但这是很多工作。

Answer 2

使用 v6，如果您想自定义事件内容并仍然希望它具有粘性，这对我有用。 确保添加“fc-event-title”类。

       `<span className="fc-event-title sticky top-0">
            {eventDuration < 1
                ? eventInfo.event.title.slice(0, 4)
                : eventInfo.event.title}
        </span>`