using parent resources as Resource groups

[oobie11]

I'm building a booking chart where each resource is a room and events are reservations.
Im currently have my resources set up like this

resources: [
  {
    id: 1,
    title: 'Floor A,
    children: [
      {
        id: 11,
        title: 'A1'
      },
      {
        id: 12,
        title: 'A2'
      }
    ],
    id:2,
    title: 'Floor B,
    children: [
      {
        id: 13,
        title: 'B1'
      },
      {
        id: 14,
        title: 'B2'
      }
    ]
  }
]

the problem Im running into is each of the groups (Floors in my example) look and act like normal resources where they show the day slots and I am able to drag and drop into them.
My workaround to prevent dropping into them is to use the eventDrop like so..

       eventDrop: function(info) {

        // Prevent dropping on group resources
        if (info.newResource) {
          if (info.newResource.extendedProps && info.newResource.extendedProps.group) {
            info.revert(); // Move the event back to its original location
          } else {
            console.log("Reservation changed to: " + info.newResource.title);
          }
        } else {
          console.log("Date changed to: " + new Date(info.event.start).toISOString().split('T')[0]);
        }
      },

For the styling, I would like the group (Floor) to just be a bar that spans the entire timeline but im not seeing how to override the theme of a specific resource or add a class to a specific resource. Anyone have a solution to do this? Is there a better way to do grouping?

Here is a visual for what my timeline currently looks like.

Id like the Floors to be colored bars that span the entire width of the timeline.