FullCalendar - 插槽持续时间不低于 1:30 分钟答案

【问题标题】：FullCalendar - slot duration not working below 1:30 minutesFullCalendar - 插槽持续时间不低于 1:30 分钟
【发布时间】：2018-05-24 00:52:19
【问题描述】：

我正在使用 FullCalendar Scheduler 的 codepen 版本，以测试它是否适合我对新项目的需求，并尝试将 slotDuration 选项减少到尽可能低。

$(function() {

  $('#calendar').fullCalendar({
    defaultView: 'timelineDay',
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'timelineDay,timelineWeek,timelineMonth'
    },
    resourceLabelText: 'Rooms',
    resources: 'https://fullcalendar.io/demo-resources.json',
    events: [{ id: '1', resourceId: 'a', start: '2018-05-24T06:00:00', end: '2018-05-24T06:04:00', title: 'event 1' }],
    slotDuration: "00:01:00"
  });
});

这是我一起玩的代码。在此版本中，插槽以每小时间隔显示，而不是每分钟显示一次。我将slotDuration 更改为什么都没关系，如果它低于00:01:30，它只会恢复为每小时持续时间。

这是一个错误吗？预期的用例？有什么办法可以将插槽持续时间减少到 1 分 30 秒以下的阈值？也许到 30 秒的门槛？如果有，怎么做？

如果有人想玩它，我还包括CodePen save，也许会出现解决方案。

【问题讨论】：

当我在您的 CodePen 中以较短的持续时间（低于 1:30）运行它时，我在控制台中看到由 fullCalendar 生成的警告“slotDuration 导致单元格过多”，这表明这是有意的行为，并旨在阻止桌子无法管理。如果您使您的时间线更小（例如，制作一个仅跨越几个小时的自定义时间线视图），那么它将让您拥有更小的时段持续时间 - 例如我制作了一个持续时间为 4 小时的时间线，它允许我成功设置 30 秒的 slotDuration。所以我认为你只需要找到一个适合你的平衡点。
@ADyson 愿意将此作为答案发布，这样我可以接受吗？
没问题，请看下文。很高兴这对您有所帮助。

标签： javascript jquery fullcalendar fullcalendar-scheduler

【解决方案1】：

当我在您的 CodePen 中以较短的持续时间（低于 1:30）运行它时，我在控制台中看到一条警告

slotDuration 导致单元格过多

由 fullCalendar 生成，这表明这是预期行为，旨在阻止表格无法管理。

如果您缩小时间线（例如，制作仅跨越几个小时的自定义时间线视图），那么它将让您的时间轴持续时间更短 - 例如根据您的 CodePen，我制作了一个持续时间为 8 小时的时间线，它允许我成功设置 30 秒的 slotDuration：

$('#calendar').fullCalendar({
    defaultView: 'timelineHours',
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'timelineHours,timelineWeek,timelineMonth'
    },
    views: {
    timelineHours: {
      type: 'timeline',
      duration: { hours: 8 },
      buttonText: 'hours'
    }
  },
  resourceLabelText: 'Rooms',
  resources: 'https://fullcalendar.io/demo-resources.json',
  events: [{ id: '1', resourceId: 'a', start: '2018-05-24T06:00:00', end: '2018-05-24T06:04:00', title: 'event 1' }],
  slotDuration: "00:00:30",
  slotLabelInterval: "00:05:00"
});

请参阅https://codepen.io/anon/pen/mLYxaV?&editors=001 以获得工作演示。

根据非常快速的实验，当 slotDuration 为 30 秒时，8 小时 25 分钟似乎大致是最大时间线大小，因此我选择了 8 小时作为一个干净的四舍五入数字。

基于此，我认为您只需在 fullCalendar 允许的限制范围内，在时间线长度和插槽大小之间找到适合您的平衡点。也许如果您检查 fullCalendar 源代码，您可能会发现单元格数量是否存在硬（或计算）限制，因此无需反复试验即可预测什么对您有用。

【讨论】：