Implement row spanning

src/hooks/useScheduleTable.js

@@ -37,6 +37,19 @@ export default function useScheduleTable({
             const rowEvents = new Set();
 
             const eventCells = filteredHalls.flatMap((hall, hallIndex, hallsArray) => {
+                if (skipHallSlots.has(hall.id)) {
+                    const leftToSkip = skipHallSlots.get(hall.id);
+
+                    if (leftToSkip <= 1) {
+                        skipHallSlots.delete(hall.id);
+                    }
+                    else {
+                        skipHallSlots.set(hall.id, leftToSkip - 1);
+                    }
+
+                    return [];
+                }
+
                 const currentTimeSlots = filteredSlots.filter(slot => compareAsc(slot.starts_at, date) === 0);
                 const currentHallSlot = currentTimeSlots.find(slot => slot.hall_id === hall.id);
 
@@ -50,6 +63,21 @@ export default function useScheduleTable({
                     return [];
                 }
 
+                let rowSpan = 1;
+
+                const spanningMicroslots = microslots.filter(slotDate =>
+                    currentHallSlot.starts_at <= slotDate &&
+                    currentHallSlot.ends_at >= slotDate
+                );
+
+                if (spanningMicroslots.length > 1) {
+                    rowSpan = spanningMicroslots.length - 1;
+
+                    if (rowSpan > 1) {
+                        skipHallSlots.set(hall.id, rowSpan - 1);
+                    }
+                }
+
                 let colSpan = 1;
 
                 for (const index of hallsArray.keys()) {
@@ -76,6 +104,7 @@ export default function useScheduleTable({
                     attributes: {
                         className: 'schedule-'.concat(currentHallSlot.event.language).concat(' ').concat(currentHallSlot.event.track?.css_class),
                         colSpan,
+                        rowSpan,
                     },
                     event: currentHallSlot.event,
                 }];