businessHours select 对月视图的限制

Question

我在使用 FullCalendar v5 时遇到问题。我正在尝试有一些 businessHours（从星期一到星期五）的月视图。问题是由小时引起的，在文档中指定默认时间是从上午 9 点到下午 5 点。

由于这些时间，日历不会 select 任何情况，我不知道如何度过一整天（我已尝试将 00:00 设置为 23:59但也不要工作）。

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'dayGridMonth',
    events: 'https://fullcalendar.io/demo-events.json',
    editable: true,
    selectConstraint: 'businessHours',
    selectable: true,
    businessHours: {
      daysOfWeek: [ 1, 2, 3, 4, 5 ],
    },
  });

实时代码笔：https://codepen.io/AlexisRiot/pen/ZEeJxwL

更新：

我只是想限制某些事件（例如员工许可）。我尝试向事件添加一个 id ('permission')，并设置选项 selectConstraint: 'permission'。该事件不应与“权限”组中的任何现有事件重叠。

Answer 1

如果您希望事件 而不是 与“权限”事件重叠，selectConstraint 是错误的选择。这将限制您只选择落在这些事件之内的时间——与您想要的相反。（它也适用于事件的 groupId 属性，而不是它的 id。）

您需要的选项是selectOverlap。这允许您指定一个回调函数，只要选择开始与事件重叠（当用户正在拖动时），该回调函数就会运行。在回调中可以检查正在重叠的事件的属性，以及 return true 或 false 来指定是否允许重叠。因此，在您的情况下，您只需检查 groupId 即可确定结果：

selectOverlap: function (event) {
  return event.groupId != 'permission'; //allow overlap if event is not in the "permission" group
}

现场演示：https://codepen.io/ADyson82/pen/bGqoWLa

businessHours select 对月视图的限制

businessHours select constraint on month view

javascript

fullcalendar

fullcalendar-5