jQuery FullCalendar：在议程视图中禁用滚动？

Posted 2023-05-09

【中文标题】jQuery FullCalendar：在议程视图中禁用滚动？

【英文标题】：jQuery FullCalendar: Disable scrolling in Agenda View?

【发布时间】：2012-05-01 16:05:36

【问题描述】：

如何使用 FullCalendar jQuery 插件禁用议程视图（周、日模式）中的滚动？在月模式下一切都很好，但是当我更改为周/日模式时，我的主页滚动条旁边会出现一个滚动条。

【问题讨论】：

在查看文档时，我看不到任何方法可以在某个视图中禁用滚动。也许提供你的代码示例，看看是否有办法在你的 html/CSS 中防止这种情况发生。

我只是看到，当我使用 basicWeek 和 basicDay 而不是议程周和议程日时，没有滚动条，所以我猜滚动条是议程周和议程日视图的“功能”。

你不能在不破解 js 文件的情况下恢复它。日历的高度设置为与宽度成正比，宽度根据可用的 div 宽度量设置。比例设置高度并使其他所有内容在周边内隐藏和可滚动。我不确定它在 js 中的设置位置，但那是必须更改的位置。希望我能提供更多帮助！

【参考方案1】：

这就是我在我的案例中所做的。 目标是动态改变高度，所以我就是这样使用 viewDisplay 事件的：

$('#calendar').fullCalendar(
    viewDisplay: function (view) 
        var h;
        if (view.name == "month") 
            h = NaN;
        
        else 
            h = 2500;  // high enough to avoid scrollbars
        

        $('#calendar').fullCalendar('option', 'contentHeight', h);
    
);

【讨论】：

viewDisplay 已被弃用

请任何人提出动态高度的解决方案。我有一个初始化议程视图的动态数据，因此我无法在我的视图中设置一些特定的高度，例如 2500。在某些情况下，内容不合适，而在其他情况下，我认为可能会有很多额外的空间。

在 FullCalendar v2.1.1 中也将高度设置为“自动”对我不起作用

【参考方案2】：

从 FullCalendar 2.1.0-beta1 开始，您可以设置 height: 'auto' 选项来禁用视图中的滚动条。

虽然这个新功能的变更日志条目可以读作“在月视图中关闭滚动条”，但它实际上适用于所有视图。

在月视图中，当日历的高度因事件过多而溢出时，会出现垂直滚动条。要关闭此行为，请将高度选项设置为“自动”。 -- from v2.1.0-beta1 changelog

【讨论】：

如果我在 FullCalendar 3.5.1 中将高度设置为自动，月视图是完美的，但议程高度被切断并出现垂直滚动条。

【参考方案3】：

只需使用：

$('#calendar').fullCalendar(
    height: "auto"
);

【讨论】：

已包含在上述答案中 (***.com/a/25440372/219324)。

【参考方案4】：

当然

$('#calendar').fullCalendar(
    height: 999999999
);

如果您的日历有滚动条，但您不希望它出现，那么您有 3 个选项：

让它足够大，不会有滚动条 缩小内容，使其适合您的条件 移除滚动条并无法访问未显示的信息

你需要比“我不喜欢滚动条”更具体

【讨论】：

谢谢，height 属性确实移除了议程日和议程周中的滚动条，但现在月份视图被裁剪并且看起来很棒。

【参考方案5】：

这是@Deulis 答案的更新和缩短版本：

$("#calendar").fullCalendar(
  viewRender: function(view)
    $("#calendar").fullCalendar("option", "contentHeight", (view.name === "month")? NaN : 9999);
  
);

正如@Pierre de LESPINAY 和@Jens-André Koch 已经提到的，viewDisplay 在 fullcalendar v2.0 中已被弃用。我们必须改用viewRender。

【讨论】：

短一点：viewRender: function(view) $('#calendar').fullCalendar('option', 'contentHeight', (view.name === 'month') ? NaN : 99999); :-)