How to change the background color of a non-event grid cell based on an office work schedule

FullCalendar provides a callback function named eventContent where the developer can basically hijack the HTML generation and return it back to FC.

However, I cannot find any way to do the same thing with non-event grid cells. I need to change the background color of non-event grid cells based on an office's work schedule. Does anyone know if this is possible?

To be more clear. An office can have appointments which in FC terms, are events. An event will be rendered within the time grid based on the start and end time of the event. So, "non-event" grid cells are cells within the time grid that DO NOT contain any appointments/events. An office has a work schedule. Could be M-F 9AM to 5PM. I need to be able to paint the background of the time grid cells that do not have events within them based on the office's schedule. Grid cells, without events, outside of the office's schedule will be one color while grid cells, again without events, within the office's schedule will be a different color. Time grid cells that have an appointment/event in them, will contain that event and will already be painted the color of that event. I'm not worried about those. Does that help?

You can use fullCalendar's businessHours feature to do this.

To set Monday-Friday 9am-5pm, you can simply add

businessHours: true

to your calendar options, because those are the default hours.

To set any other schedule, provide an object which uses the options set out in the documentation. For example:

businessHours: {
  // days of week. an array of zero-based day of week integers (0=Sunday)
  daysOfWeek: [ 1, 2, 3, 4 ], // Monday - Thursday

  startTime: '10:00', // a start time (10am in this example)
  endTime: '18:00', // an end time (6pm in this example)
}

You can even provide an array containing multiple different sets of rules, if different days of the week have a different schedule. For example:

businessHours: [ // specify an array instead
  {
    daysOfWeek: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    startTime: '08:00', // 8am
    endTime: '18:00' // 6pm
  },
  {
    daysOfWeek: [ 4, 5 ], // Thursday, Friday
    startTime: '10:00', // 10am
    endTime: '16:00' // 4pm
  }
]