Fullcalendar 调度程序限制屏幕上的月视图并启用滚动条（屏幕上 15 天 + 滚动 15 天）

Question

我的 web 应用程序上有一个 fullcalendar 调度程序。 问题是某些事件有长文本，所以我启用了这个 css：

.fc-timeline-event .fc-title {
        white-space: normal;
    }

结果更好但不可接受，但导致第一天的事件长文本，不适合阅读。 查看我在屏幕截图中以红色选择的事件。

我的问题是：是否可以强制 fullcalendar-scheduler 仅在屏幕上查看 15 天（基于月份）而其他 15 个外部屏幕启用自动水平滚动条？

我试过： slotWidth: 300选项。 好像没问题。 在台式机上工作良好...但在手机上我想设置另一个值...

Answer 1

您问

是否可以强制 fullcalendar-scheduler 仅在屏幕上查看 15 天

使用自定义视图很容易实现该部分：

views: {
  resourceTimelineFifteen: {
    type: "resourceTimeline",
    duration: { days: 15 },
    buttonText: "15 day",
    slotDuration: { days: 1}
  }
},

演示：https://codepen.io/ADyson82/pen/YzzKdXv?&editable=true&editors=001

您要求的另一部分

其他 15 个外部屏幕启用自动水平滚动

这实际上是不可能的，因为在渲染日历之前，插槽的宽度和日历的宽度是不知道的（如果屏幕调整大小，甚至可以改变）。 所以简单地将视图分成 15 天的部分可能是最好的折衷方案。 用户只需单击“下一步”按钮即可查看下一组日期。

NB 这种方法并不总是会导致视图正好从月份边界开始（无论是月初还是半月），因为月份的长度并不完全相同。 如果您想尝试纠正它，您可以尝试使用visibleRange设置做一些更聪明的事情，但如果您觉得需要它，我会将其作为练习留给您。