Calendar date ordering: Occupation overview

I’m working on a calendar plugin that would show my occupation overview ordered as following:

Calendar with occupation overview

Now I’ve got the event on the calendar with moment.js, so they are formatted like this (sorted on Start date):

let events = [{
    name: 'Event A',
    start: '01-11-2021 00:00',
    end: '08-11-2021 00:00',
},{
    name: 'Event C',
    start: '03-11-2021 00:00',
    end: '06-11-2021 00:00',
},{
    name: 'Event E',
    start: '05-11-2021 00:00',
    end: '08-11-2021 00:00',
},{
    name: 'Event D',
    start: '07-11-2021 00:00',
    end: '12-11-2021 00:00',
},{
    name: 'Event B',
    start: '10-11-2021 00:00',
    end: '17-11-2021 00:00',
},]

Expected occupationOverview array would be something like:

let ooArray = [
{   // Longest/bottom bar
    start: '01-11-2021 00:00',
    end: '17-11-2021 00:00',
    group: 1
},
{   // Middle bar 1
    start: '03-11-2021 00:00',
    end: '08-11-2021 00:00',
    group: 2
},
{   // Middle bar 2
    start: '10-11-2021 00:00',
    end: '12-11-2021 00:00',
    group: 2
},
{   // Top bar 1
    start: '05-11-2021 00:00',
    end: '06-11-2021 00:00',
    group: 3
},
{   // Top bar 2
    start: '07-11-2021 00:00',
    end: '08-11-2021 00:00',
    group: 3
},]

I have honestly no clue how to group the calendar events so they give back an array with the start and end times as resulted in the red box.

Anybody that can help me figure this out? Thanks!

Answer

With the help of @RobG I figured it out. Here is my answer for interested people:

// Not needed for answer, but result gave warnings so yeah
moment.suppressDeprecationWarnings = true;

let newItems = []
let dateArray = []
let events = [{
    name: 'Event A',
    start: '01-11-2021 00:00',
    end: '08-11-2021 00:00',
},{
    name: 'Event C',
    start: '03-11-2021 00:00',
    end: '06-11-2021 00:00',
},{
    name: 'Event E',
    start: '05-11-2021 00:00',
    end: '08-11-2021 00:00',
},{
    name: 'Event D',
    start: '07-11-2021 00:00',
    end: '12-11-2021 00:00',
},{
    name: 'Event B',
    start: '10-11-2021 00:00',
    end: '17-11-2021 00:00',
},]

// Make one big array with all start and end dates
events.forEach(event=> {
   dateArray.push({
      type: 'start',
      date: event.start
   }, {
      type: 'end',
      date: event.end
   })
})


// Sort the dates from first to last
dateArray = dateArray.sort((left, right) => {
   return moment(left.date).diff(moment(right.date))
})


let groupID = -1

// Loop through the array with all dates and add them to a group 
// based on if the current date is a start or end
for (let i = 0; i < dateArray.length; i++) {
   if (dateArray[i].type === 'start') groupID++
   else groupID--

   for (let ii = 0; ii <= groupID; ii++) {
      if (dateArray[i + 1] && 
             !moment(dateArray[i].date).isSame(dateArray[i + 1].date)) {
         newItems.push({
            group: 1,
            start: dateArray[i].date,
            end: dateArray[i + 1].date,
            subgroup: 'sg_' + ii,
            subgroupOrder: ii
         })
      }
   }
}

console.log(newItems)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>