fullcalendar - Fullcalendar 制作标题已修复

Question

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

在 Fullcalendar 中有一种方法可以将标题修复为不可滚动

但没有公布决议。

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

有没有办法做到这一点？

谢谢，罗伯

Answer 1

虽然只讨论了 FullCalendar 的调度程序组件，但我花了几天时间关注 html 的错综复杂的滚动事件，结果有问题，尤其是在需要更多视图的情况下。然后我偶然发现了position:sticky和下面的作品就像一个梦（在 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

转到此站点：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);    
    }

你去吧。用于全日历控制的超酷贴纸标题和列 :)

Answer 3

尝试在您的 CSS 中添加类似的内容：

.fc-header{
   position: fixed;
  }

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