完全设置 disabled/untouchable 小时范围

Question

我正在测试这个小部件的功能，现在我遇到了必须为日常工作调度程序创建垂直资源视图的情况。

    _calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'resourceTimeGridDay',
        dayMaxEvents: true,
        dayMinWidth: 130,
        allDaySlot: false,
        nowIndicator: true,
        slotMinTime: '10:00:00',
        slotMaxTime: '22:00:00',
        slotDuration: '00:15:00',
        slotLabelInterval: '01:00:00',
        slotLabelFormat: {
            hour: '2-digit',
            minute: '2-digit'
        },
        editable: true,
        selectable: true,
        selectMirror: true,
        displayEventTime: true,
        displayEventEnd: true,
        eventResizableFromStart: true,
        eventResourceEditable: true
    });
    _calendar.render();

所以 - 这是该小部件在页面上最初理想外观的简单示例。现在我还可以为 ResourceA|B|C|D... 添加事件，为了简化示例，它随机覆盖营业时间范围。例如，从 12 到 13:30，然后从 15:45 到 16:45，然后从 18:15 到 18:45。

而且现在是提问时间))) 如何添加-动态！ - 非工作时间范围 - selection/interaction 应该完全无法访问！你不应该用鼠标 click/select/resize 它们（因为它可以用普通事件完成，放置得更早），当改变与它们相邻的事件的时间范围时，你不能与它们相交，已经设置得更早，在日程安排。那些它必须是日常生活中所有其他事件中牢不可破的barrier/stronghold。如何实现？

Answer 1

好的，感谢@ADyson - 我能够找到所有信息...

创建“即时”障碍事件：

let newEvent = new Object();
newEvent.start = new Date('2020-12-14T10:00:00');
newEvent.end = new Date('2020-12-14T12:00:00');
newEvent.resourceId = resId; /* for which teacher i must add the NONwrk.hours vault */
newEvent.display = 'background'; /* the MAIN feature - this event is a background event */
newEvent.overlap = false; /* prevents this event from being dragged/resized over other events. 
                          Also prevents other events from being dragged/resized over this event */
_calendar.addEvent(newEvent);

让我们为 _calendar 对象配置一个控制标志，以及我已经在代码中使用的其他标志：

  selectOverlap: function(event) {
    return event.display !== 'background'; /* the user will not be allowed to select periods of time 
                                                 that intersect with bg.events on the calendar */
  },

我会得到我想得到的)))

完全设置 disabled/untouchable 小时范围

Set completely disabled/untouchable hours ranges

javascript

html

fullcalendar

fullcalendar-scheduler

fullcalendar-5