jQuery FullCalendar 不呈现

Posted 2023-02-22

【中文标题】jQuery FullCalendar 不呈现

【英文标题】：jQuery FullCalendar not rendering

【发布时间】：2012-05-07 14:17:34

【问题描述】：

我的网站上有一个可用的完整日历，但是在您更改月份/年份或选择“今天”之前，实际的日历表不会显示。

如果我查看渲染的源代码，我会看到桌子周围的 div 是空的，直到我按下按钮。

<div style="position: absolute; -moz-user-select: none;" class="fc-view fc-view-month fc-grid" unselectable="on"></div>

有人知道为什么会这样吗？

【参考方案1】：

您是否在选项卡或对话框中拥有此日历，最初是隐藏在视图中的？

如果是这样，您需要在该控件处于活动状态时显式呈现 fullCalendar。

假设您正在使用 jQuery UI 选项卡小部件，并且在第二个选项卡中有 FullCalendar（在选择第二个选项卡之前它是隐藏的）。在这种情况下，您可以这样做：

$('#tabs').tabs(
    show: function(event, ui) 
        $('#calendar').fullCalendar('render');
    
);

这可确保在显示选项卡时呈现日历。希望这会有所帮助！

【讨论】：

宾果游戏，成功了。我在 UI 选项卡中没有它，但它在我制作的自定义选项卡中。我试图渲染它，但我想我没有把代码放在正确的位置。谢谢！

太好了！你介意接受这个作为你的答案吗？

@Corey 在解决您的问题时不要忘记接受答案。否则，人们不会再回答你了……

只是一个简短的说明（顺便说一句完美的答案）。有谁知道为什么它不会渲染一开始隐藏的视图？对我来说，我必须在我的模态进入之后进行渲染，并且它以一种奇怪的方式开始动作......这并不重要，因为我只是要覆盖它并淡入它（因为我是一个流畅的操作员)...但我仍然想知道隐藏后不渲染的决定背后的原因！ :)

@lol FC（以及许多其他 JS 库）根据元素的放置位置计算要呈现的元素的尺寸和位置。对于隐藏元素，一旦父元素（如选项卡或模式）变得可见，这些计算将无效。因此，我们强制 FC 在显示父元素时进行计算。