javascript - Fullcalendar 调度程序限制屏幕上的月视图并启用滚动条(屏幕上 15 天 + 滚动 15 天)
问题描述
我的网络应用程序上有一个完整的日历调度程序。问题是某些事件的文本很长,所以我启用了这个 css:
.fc-timeline-event .fc-title {
white-space: normal;
}
结果更好但不可接受,但导致第一天的事件长文本,不适合阅读。查看我在屏幕截图中以红色选择的事件。
我的问题是:是否可以强制 fullcalendar-scheduler 仅在屏幕上查看 15 天(基于月份)而其他 15 个外部屏幕启用自动水平滚动条?
我试过:slotWidth: 300
选项。好像没问题。在台式机上工作良好...但在手机上我想设置另一个值...
解决方案
您问
是否可以强制 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
如果您想尝试纠正它,您可以尝试对设置做一些更聪明的事情,但如果您觉得需要它,我会将其作为练习留给您。
推荐阅读
- ios - 在 Swift (iOS) 中单击单元格内的按钮后替换 tableview 单元格
- python - 如何根据for循环中的if子句更改pandas DataFrame中的值
- javascript - Vanilla JS中具有4个值的按钮
- flutter - 当我不提供数据时,为什么我的 BLoC 不起作用?
- flutter - Flutter Null-Safety 问题:不匹配类型问题
- python - 我需要如何在这里使用标准输入/标准输出
- php - 在更多文件中连接数据库类
- c# - blazor 后端模型异常只显示 null?
- c++ - TagLib - 将自定义标签写入音频文件
- javascript - 如何调整此 js 文件以具有点击展开内容?