全日历制作标题固定 [英] Fullcalendar Making Headers Fixed

问题描述

我正在尝试固定Fullcalendar标头.我发现了这篇文章:

I'm trying to make the Fullcalendar headers fixed. I found this post:

在Fullcalendar有一种方法可以解决标题不可滚动的问题

但没有发布解决方案.

我已经查看了文档，但是找不到任何参考.

I've looked in the documentation but can't find any reference to it.

有没有办法做到这一点?

Is there a way to do this?

谢谢，罗伯特

推荐答案

尽管仅谈论FullCalendar的调度程序组件，但我还是花了几天时间研究复杂的html滚动事件以及错误的结果，尤其是在需要更多视图的情况下.然后我偶然发现了 position:sticky &下面的作品就像一个梦(在chrome和safari上测试)

Although only talking about FullCalendar's scheduler component, I spent days hooking into scroll events of the intricacies of html with buggy results, especially as more views were needed. Then I stumbled across position:sticky & the below works like a dream (tested on chrome & safari)

.fc-head{
position: -webkit-sticky !important;
position: sticky !important;
top:0;
background-color: white;
z-index:9999 !important;
}

在此之上，您需要通过添加eventAfterAllRender处理程序来处理水平滚动以在滚动时水平移动头部:

on top of this you need to handle the horizontal scroll to move the head horizontally when scrolling by adding an eventAfterAllRender handler:

  eventAfterAllRender: function (view) {
             var divider = $('.fc-divider').first();
            var dividerOffset = divider.offset().left;
            $('.fc-scroller').eq(3).scroll(function () {
                    var scrollLeft = $('.fc-scroller').eq(3).scrollLeft();
                    if (scrollLeft >= 0) {
                        var total = dividerOffset - scrollLeft;
                        $('.fc-head').css('left', total + 'px');
                    }
                    else {
                        $('.fc-head').css('position', 'relative');
                        $('.fc-head').css('left', dividerOffset + 'px');
                    }
                });

        }

这篇关于全日历制作标题固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！