Question

我正在玩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更改为{1}}并不重要，如果它低于00:01:30，则只会恢复为每小时一次。

这是一个错误吗？预期的用例？有没有办法将插槽持续时间缩短到1分30秒以下？也许到30秒的门槛？如果是这样，怎么样？

如果有人想玩它，我还会加CodePen保存，可能会出现解决方案。

Answer 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源代码，可能会发现是否存在对单元格数量的硬（或计算）限制，因此可以预测什么对您有用，而不会反复试验。

FullCalendar - 插槽持续时间不到1:30分钟以下

1 个答案: