Fullcalendar 完整日历制作标题已修复

我正在尝试修复完整的日历标题。我发现这个帖子：

但没有公布决议

我查阅了文档，但找不到任何参考资料

有办法做到这一点吗

---

谢谢，Rob

尝试在css中添加如下内容：

.fc-header{
   position: fixed;
  }

 .fc-first .fc-last{
    position: fixed;
 }

转到此站点：

下载JS

然后修改源JS文件，如下所示：

将所有主要JS逻辑添加到“构造函数”中：

因此，JS文件中的前几行应该如下所示：

---

---

现在您可以“选择”特定的DOM对象，如下所示：

$('.fc-grid').each(function () {

       var seeThis = $(this);
        if (seeThis.is(":visible")) {
            //.fc-border-separate is the table
            $(seeThis.find('.fc-border-separate')).stickyheader();
                                return false;
        }

}); 

然后添加必要的CSS，如下所示：

/对于粘性标题和列/

好了。超级酷的贴纸标题和列，适用于您的fullcalendar控件：）

---

虽然我只讨论了FullCalendar的调度程序组件，但我花了好几天的时间研究了复杂的html滚动事件，结果有问题，尤其是在需要更多视图的情况下。然后我偶然发现了位置：sticky&下面的工作原理就像一个梦（在chrome和safari上测试）

除此之外，您还需要通过添加eventAfterAllRender处理程序来处理水平滚动，以便在滚动时水平移动头部：

  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');
                    }
                });

        }

---

是的，例如在周视图中，我希望日期是静态的，时间是滚动的。在月视图中，我想冻结一周中的几天，并让它们下面的所有内容滚动。这可能吗？谢谢，罗布，下面的答案有用吗？

$('.fc-grid').each(function () {

       var seeThis = $(this);
        if (seeThis.is(":visible")) {
            //.fc-border-separate is the table
            $(seeThis.find('.fc-border-separate')).stickyheader();
                                return false;
        }

}); 

    .sticky-wrap .sticky-thead,
    .sticky-wrap .sticky-col,
    .sticky-wrap .sticky-intersect {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .125s ease-in-out;
        z-index: 50;    
    }

    .sticky-wrap .sticky-thead {
        box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);    
    }

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

  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');
                    }
                });

        }