I am not able to gray-out resources which are outside start and end date

Issue

I want to grayout other date which is not between in bussinessHours. In this example I've passed in resource a businessHours dates. I want a grayout background of before 2024-01-19 and after 2024-01-30 dates. So I am not able to drop any event before and after this dates.

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: [
      {
        "id": "a",
        "title": "Auditorium A",
        bussinessHours: {
          start: new Date('2024-01-19'),
          end: new Date('2024-01-30')
        }
      },
      {
        "id": "b",
        "title": "Auditorium B",
        "eventColor": "green"
      },
      {
        "id": "c",
        "title": "Auditorium C",
        "eventColor": "orange"
      }
    ],
    events: [
      {
        "resourceId": "b",
        "title": "event 5",
        "start": "2024-01-19T10:00:00+00:00",
        "end": "2024-01-19T15:00:00+00:00"
      },
      {
        "resourceId": "a",
        "title": "event 2",
        "start": "2024-01-19T09:00:00+00:00",
        "end": "2024-01-19T14:00:00+00:00"
      }
    ]
  });

  calendar.render();
});

Solution

Thank you all of you for giving your time to resolve this but I got a solution from Fullcalendar support team which is below,

I've added background-events based on my resource availability like

events.push({
   id: 'my-resource-id',
   start: new Date('2024-01-01'),
   end: new Date('2024-03-15'),
   rendering: 'inverse-background',
   resourceId: 'my-resource-id',
   backgroundColor: 'gray'
})

In my data Cornelia and Monika was not available from 15th March and I got below output which I want

Answered By - Aman Gojariya