如何在 fullCalendar 中使用 snapDuration？答案

【问题标题】：How to use snapDuration in fullCalendar?如何在 fullCalendar 中使用 snapDuration？
【发布时间】：2019-10-08 08:46:33
【问题描述】：

我试图要求可选择的事件在 fullCalendar 中具有固定的持续时间（例如，您可以每隔两小时预订一辆皮卡车），并且可以每半小时开始一次选择（例如，您可以从10:00-12:00 或 10:30-12:30)。我正在尝试将 snapDuration 用于前者，将 slotDuration 用于后者。

我尝试为日历对象设置 slotDuration 和 snapDuration 属性，但每当我选择日历上的单元格时，它都会使用 slotDuration。我还寻找了这已经有效的示例，但所有有效的示例都适用于旧版本的 fullCalendar。

我将 main.min.js 文件用于以下代码的核心、交互、daygrid 和 timegrid。我还在https://codepen.io/anon/pen/gJXXpw

设置了一个codepen

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'timeGridWeek',
    selectable:true,
    select:function(info){
      alert("I'm hoping that it will snap to two hours before I do other stuff inside this function.");
    },
    slotDuration: '00:30',
    snapDuration: '02:00',
    defaultDate: '2019-05-21',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'Birthday Party',
        start: '2019-05-20T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2019-05-22'
      }
    ]
  });

  calendar.render();
});

在选择时间间隔以将事件添加到日历时，我希望它“捕捉”到 snapDuration 值（例如，2 小时），但它仅受 slotDuration （例如，30 分钟）的限制。我可以添加一些额外的 javascript 来获得我需要的约束，但如果可能的话，我更愿意使用 fullcalendar 在本机处理这个问题。

【问题讨论】：

文档中没有明确说明，但我的理解是 snapDuration 仅在其持续时间小于 slotDuration 时才生效。观看将 slotDuration 更改为 4 小时后演示会发生什么 - 现在您可以选择标记时间之间的 2 小时间隔。 codepen.io/anon/pen/EzojoE
我在您的 codepen 中验证了行为，然后快速查看了 core 和 timegrid 中的源代码。您的解释是正确的，如果您想让您的评论成为答案，我会将其标记为解决方案。

标签： fullcalendar fullcalendar-4

【解决方案1】：

文档中没有明确说明，但似乎snapDuration 仅在其持续时间小于slotDuration 值时才生效。

例如，在您的演示中，如果您将slotDuration 更改为 4 小时，现在您可以选择标记时间之间的 2 小时间隔。

slotDuration: '04:00',
snapDuration: '02:00',

更新演示：https://codepen.io/anon/pen/EzojoE

【讨论】：