title: Reduce and group by condition
body: <p>I have a function that calculates the maximum events that occurs at the same time (HH:mm). The example below has three events occurring at the same time. I want to group events like the example below. </p>
  
  <p>The result should be: </p>
  
  <p>Digital meeting 00:00-01.00</p>
  
  <ul>
  <li><p>Group 1:<br>
  Support 00.00-00.25   </p></li>
  <li><p>Group 2:<br>
  Book meeting 00:30-01:30<br>
  Personal Meeting 00:30 - 01:30</p></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/8LFlp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8LFlp.png" alt="Four events, where three occurs at the same time"></a></p>
  
  <p>So far I am only able to find the occurrences for one single event. I guess I would have to use an reducer and a condition? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let events = [
    {
      id: 9,
      start: 0,
      end: 60,
      title: "Digital meeting"
    },
    {
      id: 80,
      start: 30,
      end: 90,
      title: "Book meeting"
    },
    {
      id: 81,
      start: 30,
      end: 90,
      title: "Personal meeting"
    },
    {
      id: 84,
      start: 0,
      end: 24,
      title: "Support"
    }]
  
   events.forEach(item =&gt; {
  
  // Find the matches
  const matchedItems = events.filter(o =&gt; {
    return o.start &lt;= item.end &amp;&amp; o.end &gt;= item.start &amp;&amp; item.id !== o.id;
  });
  
  console.log(`Matched for ${item.id}`, matchedItems)
  
  // Remove matches from the events array so there won't be duplicates
  //remove(matchedItems);
  
  // Format the items and place them in calendar grid
  //format([item, ...matchedItems]);
     });</code></pre>
  </div>
  </div>
  </p>