Make events visually span over multiple resources - fullcalendar

Question

I am trying to make events visually span over all the resources when 1 event is held in all the resources.
Here is a simplified pen of my data https://codepen.io/mike66187/pen/VwyONwa
and this is what i want to achieve with it resources with spanned event
code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var date = new Date();
date.setUTCHours(12)
date.setUTCMinutes(0)
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'resourceTimeGridDay',
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B'},
{ id: 'c', title: 'Room C' },
{ id: 'd', title: 'Room D' }
],
events: [ {
id: '1',
resourceIds: ['a', 'b', 'c', 'd'],
title: 'Meeting',
start: date
}]
});
calendar.render();
});
How can i achieve this?