0
FullCalendar의 v3.0.0페이지로드
에 전체 달력을 묘화 후 캘린더도에서, 수축 된 나타날 jsFiddle 그들은 이것을 매우 쉽게 보여주는 똑같은 일을합니다.
아래에있는 내 피들을 클릭하면 캘린더 테이블이 잘못 표시되는 것을 볼 수 있지만 디스플레이와 JS 사이에 막대를 끌면 캘린더가 다시 그려지고 최대한 정사각형으로 나타납니다. 마찬가지로 페이지에 12 개의 캘린더가있는 테이블을 가지고 150 %의 확대/축소를 설정 한 다음 다시로드하면 동일한 문제가 발생하지만 확대/축소 정도를 어느 정도 변경하면 캘린더가 최대한 정사각형으로 수정됩니다 .
TLDR; 설정을 확대하기 위해 설정된 경우 달력 부하에 처음 3 개월 동안 터져 본다.
이드 줌 레벨을 변경하거나 드래그 할 때처럼 캘린더 자체를 수정 있도록 부하에 다시 그리기의 일종을 좋아 큰/작은 표시.
필자는 .('rerenderevent') 등을 사용해 보았습니다.
HTML :
<section id="calendar-container" style="width: 100%; height: 100%;">
<table id="calendar-table">
<tr>
<td><div id="calendar0" class="calendar"></div></td>
<td><div id="calendar1" class="calendar"></div></td>
<td><div id="calendar2" class="calendar"></div></td>
</tr>
<tr>
<td><div id="calendar3" class="calendar"></div></td>
<td><div id="calendar4" class="calendar"></div></td>
<td><div id="calendar5" class="calendar"></div></td>
</tr>
<tr>
<td><div id="calendar6" class="calendar"></div></td>
<td><div id="calendar7" class="calendar"></div></td>
<td><div id="calendar8" class="calendar"></div></td>
</tr>
<tr>
<td><div id="calendar9" class="calendar"></div></td>
<td><div id="calendar10" class="calendar"></div></td>
<td><div id="calendar11" class="calendar"></div></td>
</tr>
</table>
</section>
JS :
for (i = 0; i < 12; i++) {
calendarDate = moment().month(i).year(2016);
$('#calendar' + i).fullCalendar({
theme: true,
header: {
left: '',
center: 'title',
right: ''
},
defaultDate: calendarDate
});
}