fullcalendar не отображается в невыбранном jqxtab

У меня возникла проблема, когда fullcalendar не будет отображаться в jqxtab, если вкладка «selectedItem» не является вкладкой, содержащей fullcalendar. Допустим, календарь находится на вкладке 0, а мой selectedItem установлен на вкладке 1. Вторая вкладка выбирается при загрузке страницы, как и следовало ожидать. Если я затем нажму на первую вкладку (содержащую полный календарь), отобразятся только кнопки заголовка «Сегодня ‹ >» для полного календаря. Если я нажму на одну из этих кнопок, ТОГДА отобразится остальная часть полного календаря.

Если при загрузке страницы выбрана вкладка 0, fullcalendar отрисовывается сразу, как и следовало ожидать.

Код ниже:

$(document).ready(function () {
        //Creating jqxTabs

        $('#jqxTabs').jqxTabs({ selectedItem: 1, width: '100%' });
        $('#calendar').fullCalendar({
            // put your options and callbacks here
        })


});

<div id='jqxTabs'>
<ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
</ul>
<div style="width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px;"><div id='calendar'></div></div>
<div style="width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px;">Tab 2</div>

</div>

Итак, я нашел исправление, которое должно вызывать функцию рендеринга при нажатии на вкладку, однако это не работает, если в jqxtabs включено затухание, что отстой.

$('#jqxTabs').on('selected', function (event) { 
    $('#calendar').fullCalendar('render');
});

fullcalendar jqxwidgets
person defyent    schedule 07.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Fullcalendar может отображаться только в том случае, если он виден. Найденное вами исправление не работает с исчезновением, поскольку оно не отображается при срабатывании события tabclick.

Простое решение - использовать тайм-аут. Кажется, что он даже работает без фактической задержки (просто запускается после завершения другого кода):

$('#jqxTabs').on('tabclick', function (event) {
    window.setTimeout(
        function(){
            $('#fc2').fullCalendar('render');
        });
});
person DanielST    schedule 13.02.2015