完整的日历响应答案

【问题标题】：Full Calendar responsive完整的日历响应
【发布时间】：2018-08-01 19:06:47
【问题描述】：

当我在“移动”甚至“Ipad”上查看我的日历时，我一直遇到这个问题，事件插槽对用户不友好，甚至看不到事件。但是高度没有问题。只有问题与宽度。任何人都可以帮忙。提前致谢这是代码：-

        defaultView: 'agendaDay',
        minTime: '#{@timing_slots[:start_time]}',
        maxTime: '#{@timing_slots[:end_time]}',
        slotDuration: '00:45:00',
        //themeSystem: 'bootstrap',
        aspectRatio: 2.8,
        contentHeight:'auto',
        slotEventOverlap: false,
        defaultDate: date,
        editable: false,
        selectable: true,

Ipad view

【问题讨论】：

不幸的是 fullCalendar 使用固定的网格系统来渲染日历，当然这不太适合小屏幕。您对此无能为力。这种事情之前已经问过，如果你搜索。我建议您可以实现您的页面，以便如果页面被加载（或调整大小）到一个小屏幕，它会执行类似重新绘制日历的操作，因此它一次只显示一天 - 可能是一个列表或议程视图单日，适合小空间的东西。您必须为该开关编写代码
是的，对 fullCalendar 的研究很少，发现它不太适合小屏幕。但是，我试图切换到议程周或月以用于至少有弹出选项的较小屏幕，用户可以通过单击“查看更多链接”去查看事件数量。 @ADyson
是否可以根据屏幕的宽度大小更改完整日历的默认视图。我正在尝试使用此行代码“defaultView: (function () { if ($(window).width() >= 768) { return defaultView = 'agendaDay'; } else { return defaultView = 'month' ; } })()".它工作正常，但是您必须每次刷新浏览器才能查看更改。任何内容都无需引用页面。我尝试了 windowResize 函数，但没有 Luck @ADyson。任何帮助将不胜感激。提前致谢

标签： calendar fullcalendar fullcalendar-scheduler fullcalendar-3 fullcalendar-2

【解决方案1】：

关于您在 cmets 中关于更改视图的问题；是的，您可以使用 changeView 方法执行此操作。所以，也许尝试这样的事情：

if (window.innerWidth >= 768 ) {
    $('#calendar').fullCalendar('changeView', 'agendaDay');
} else {
    $('#calendar').fullCalendar('changeView', 'month');
}

changeView Docs

希望对您有所帮助。

【讨论】：