Question

FullCalendar v3.0.0

当页面放大到150％并且页面上有一组12个日历时，日历会从左到右缩小，同样在jsFiddle中他们也会做同样的事情，这使得显示非常简单。 / p>

如果单击下面的小提示，您将看到日历表显示不正确，但是当您在显示屏和JS之间拖动条时，日历将重新绘制并尽可能地显示为正方形。同样，如果您在页面上有这12个日历的表格，并且您将缩放设置为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

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

1 个答案: