Fullcalendar Создание заголовков Исправлено

Question

Я пытаюсь зафиксировать заголовки Fullcalendar. Я нашел этот пост:

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

но не было разрешения опубликован.

Я просмотрел документацию, но не могу найти ссылки на нее.

Есть ли способ сделать это?

Спасибо, Роб

Answer 1

Попробуйте добавить в свой CSS-то вроде есть:

.fc-header{ 
    position: fixed; 
    } 

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

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

Там вы идете. Супер крутой заголовок наклейки и колонки для fullcalendar управления :)

Answer 3

Хотя только о компоненте планировщика FullCalendar, я проводили дни закреплять в спиральные события тонкостей HTML с результатами багги, особенно нужно были больше просмотров , Потом я наткнулся на положения: липкие & следующих работ, как сон (проверен на хромированной & сафари)

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

     }