时间戳

首页 > 解决方案 > businessHours 在月视图上选择约束

javascript - businessHours 在月视图上选择约束

问题描述

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

由于这些时间，日历没有选择任何情况，我不知道如何度过一整天（我尝试将 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'。该事件不应与“权限”组中的任何现有事件重叠。

标签： javascriptfullcalendarfullcalendar-5

解决方案

如果您希望事件不与“许可”事件重叠，selectConstraint则该选项是错误的。这将限制您仅选择属于这些事件的时间-与您想要的相反。（它也适用于事件的groupId属性，而不是它的id.）

您需要的选项是selectOverlap。这允许您指定一个回调函数，该函数在选择开始与事件重叠时运行（当用户拖动时）。在回调中可以检查正在被重叠的事件的属性，并返回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

推荐阅读