完整日历使标题固定

Question

我正在尝试修复完整日历标题。 我找到了这篇文章：

在完整日历中，有没有办法将标题修复为不可滚动

但是没有公布决议。

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

有没有办法做到这一点？

谢谢，罗伯

Answer 1

虽然只谈论 FullCalendar 的调度程序组件，但我花了几天时间将 html 错综复杂的滚动事件与错误的结果挂钩，尤其是在需要更多视图的情况下。 然后我偶然发现了位置：粘性，下面的工作就像一个梦（在chrome和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);    
    }

给你。超酷的贴纸标题和列，用于您的完整日历控制:)