FullCalendar

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 更改为什么并不重要，如果它低于 00:01:30，它只会恢复为每小时持续时间。

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

我也包括 CodePen 保存如果有人想玩它，也许会有解决方案。

Answer 1

当我在你的 CodePen 中运行它的持续时间很短时（在 1:30 下）我在控制台中看到警告

slotDuration results in too many cells

由 fullCalendar 生成，这表明这是有意为之的行为，旨在阻止 table 无法管理。

如果您使时间轴更小（例如，制作一个只跨越几个小时的自定义时间轴视图），那么它会让您的时段持续时间更短 - 例如根据您的 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允许的限制范围内，在时间线的长度和slots的大小之间找到一个适合你的平衡点。也许如果您检查 fullCalendar 源代码，可能会发现单元格数量是否有硬性（或计算）限制，因此无需反复试验即可预测什么对您有用。

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

FullCalendar - slot duration not working below 1:30 minutes

javascript

jquery

fullcalendar-scheduler