Set completely disabled/untouchable hours ranges

Question

I am testing the functionality of this widget and now I've faced with situation when I must to create a vertical Resource view for the day work scheduler.

    _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();

So - this is trivial example of the initial desirable appearance of this widget on the page. And now i can also to add Events for ResourceA|B|C|D... which randomly cover ranges of business hours for simplicity of the example. For example, from 12 to 13:30, then from 15:45 to 16:45, then from 18:15 to 18:45.

And only now is the question time))) How to add - in dynamics! - NON-working hours ranges - which should be completely inaccessible for selection/interaction! You should not be able to click/select/resize them with the mouse (as it can be done with ordinary events, placed earlier), you cannot intersect with them when changing the time range of events adjacent to them, already set earlier, in the schedule. Those it must be an unbreakable barrier/stronghold among all the other events in the daily routine. HOW to achieve that?

Answer 1

OK, thanks to @ADyson - I was able to find all pieces of info...

1. Create "on-the-fly" barrier-event:

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);

2. Let's configure the _calendar object with one more control flag, along with the others that I have already used in the code:

  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 */
  },

And I will get what I wanted to get)))