선택되지 않은 jqxtab에서 fullcalendar가 렌더링되지 않습니다.

Question

"selectedItem"탭이 fullcalendar가 포함 된 탭이 아닌 경우 fullcalendar가 jqxtab에서 렌더링되지 않는 문제가 있습니다. 따라서 달력이 탭 0에 있고 selectedItem이 탭 1로 설정되어 있다고 가정 해 봅시다. 예상대로 페이지가로드 될 때 두 번째 탭이 선택됩니다. 그런 다음 첫 번째 탭 (fullcalendar 포함)을 클릭하면 "오늘 <>"fullcalendar의 머리글 단추가 표시됩니다. 이 버튼들 중 하나를 클릭하면 나머지 fullcalendar가 렌더링됩니다.

페이지로드시 탭 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'); 
}); 

Answer 1

Fullcalendar는 표시되는 경우에만 렌더링 할 수 있습니다. 발견 된 수정 사항은 tabclick 이벤트가 실행될 때 보이지 않기 때문에 페이드와 함께 작동하지 않습니다.

쉬운 해결 방법은 시간 초과를 사용하는 것입니다. 실제 지연없이 작동하는 것처럼 보입니다 (다른 코드 완료 후에 실행 됨).

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