Question

我正在尝试修复Fullcalendar标头。我找到了这篇文章：

in Fullcalendar is there a way to fix the header to not be scrollable

但是没有公布决议。

我查看了文档，但找不到任何引用。

有办法做到这一点吗？

谢谢，Rob

Answer 1

虽然只讨论了FullCalendar的调度程序组件，但我花了几天时间来查看带有错误结果的html错综复杂的滚动事件，特别是当需要更多视图时。然后我偶然发现了位置：粘滞＆amp;下面的工作就像一个梦（在chrome＆amp; safari上测试）

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

除此之外，您需要处理水平滚动以在滚动时通过添加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');
                    }
                });

        }

Answer 2

尝试添加你的css：

.fc-header{
   position: fixed;
  }

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

Answer 3

转到此站点：http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

下载JS

然后像这样修改源JS文件：

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

$.fn.stickyheader = function (method, options) {

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

$(function () {

$.fn.stickyheader = function (method, options) {   

        if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {

现在您可以“选择”特定的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：

/ 对于粘性标题和列 /

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

你去吧超酷的贴纸标题和列为您的fullcalendar控制:)

Fullcalendar使标题固定

3 个答案: