javascript - 在页面加载时重绘完整日历

Question

FullCalendar v3.0.0

当页面放大到 150% 并且页面上有一组 12 个日历时，日历会从左到右缩小，在 jsFiddle 中它们也会做同样的事情，这使得显示这一点变得非常容易。

如果您点击下面的我的 fiddle ，您会看到日历表显示不正确，但是当您拖动显示屏和 JS 之间的栏时，日历将重新绘制并尽可能显示为正方形。同样，当您在页面上有这十二个日历的表格并将缩放设置为 150% 然后重新加载时，您会看到相同的问题，但是如果您或多或少更改缩放，它会尽可能将日历固定为正方形.

TLDR; 当设置设置为放大时，加载前 3 个月的日历看起来很奇怪。

我喜欢在加载时进行某种重绘，这样日历就会自行修复，就像您更改缩放级别或将显示拖动到更大/更小时一样。

我尝试过 .('render') .('rerenderevent') 等，但均无济于事。

FIDDLE

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

Answer 1

我可以通过重置加载时所有日历的纵横比来解决此问题:

$(".fc").fullCalendar('option', 'aspectRatio', 1.25);

UPDATED FIDDLE

FullCalendar Documentation