Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #table {
            width: 700px;
            margin: 0 auto;
        }

        .cell {
            position: relative;
            float: left;
            box-sizing: border-box;
            width: 100px;
            height: 150px;
            border: 1px solid black;
        }

        .event {
            box-sizing: border-box;
            width: 100%;
            height: 5px;
            margin: 4px 0;
        }

        .event:first-of-type {
            margin-top: 0;
        }

        .event.start {
            border-left: 10px solid red;
        }

        .event.end {
            border-right: 10px solid blue;
        }
    </style>
</head>
<body>
<div id="table">

</div>

<script>
    let eventsMock = [
        [0,7],
        [0,4],
        [0,0],
        [1,5],
        [1,2],
        [3,4],
        [5,6]
    ].map(e => {
        return {
            'color': eventColor(),
            'range': e,
        }
    });

    // rows result

    // 0: [0,7]
    // 1: [0,4], [5,6]
    // 2: [0,0], [1,5]
    // 3: [1,2], [3,4]

    function sortEvents(events) {
        let eventsClone = [...events];

        eventsClone.sort((aEvent, bEvent) => {
            let [aStart, aEnd] = aEvent.range;
            let [bStart, bEnd] = bEvent.range;

            if (aStart === bStart && aEnd === bEnd) {
                return 0;
            }

            if (aStart < bStart) {
                return -1;
            }

            if (aStart === bStart) {
                let aLn = aStart + aEnd;
                let bLn = bStart + bEnd;

                return bLn - aLn;
            }

            return 1;
        });

        return eventsClone;
    }

    (function init() {
        const month = createTable();
        let events = sortEvents(eventsMock);
        let eventPositions = getEventPositions(events);

        eventPositions.map(row => console.log(row))
    })();

    function createTable() {
        const week = [];
        const tableNode = document.getElementById('table');

        for (let i = 0; i < 7 * 5; i++) {
            const cellNode = document.createElement('div');
            cellNode.className = 'cell';
            cellNode.innerText = i % 7 + 1;

            tableNode.appendChild(cellNode);
            week.push(cellNode);
        }

        return week;
    }

    function drawEvents(eventRows) {
        eventRows.forEach((row, i) => {
            row.forEach(event => drawEvent(event, i));
        });
    }

    function drawEvent(event, day) {
        let [start, end] = event.range;
        let color = event.color;

        for (let i = start; i <= end; i++) {
            const dayNode = month[i];
            const eventNode = document.createElement('div');

            eventNode.className = 'event';
            setColor(eventNode, color);

            if (i === start) {
                eventNode.classList.add('start')
            }

            if (i === end) {
                eventNode.classList.add('end')
            }

            dayNode.appendChild(eventNode);
        }
    }

    function getEventPositions(events) {
        let eventsByPosition = [];

        events.forEach(event => {
            let rowIndex = 0;
            if (!eventsByPosition.length) {
                eventsByPosition[0] = [event];
                return;
            }

            for (let i = 0; i < eventsByPosition.length; i++) {
                let eventsRow = eventsByPosition[i];

                if (!rowHasOverlap(event, eventsRow)) {
                    break;
                }
                rowIndex++;
            }

            eventsByPosition[rowIndex] = eventsByPosition[rowIndex] || [];
            eventsByPosition[rowIndex].push(event);
        });

        return eventsByPosition;
    }

    function rowHasOverlap(event, eventsRow) {
        for (let i = 0; i < eventsRow.length; i++) {
            let eventInRow = eventsRow[i];

            if (isOverlap(event, eventInRow)) {
                return true;
            }
        }

        return false;
    }

    function isOverlap(eventA, eventB) {
        let [aStart, aEnd] = eventA.range;
        let [bStart, bEnd] = eventB.range;

        let startInside = aStart >= bStart && aStart <= bEnd;
        let endInside = aEnd >= bEnd && aEnd <= bEnd;

        return startInside || endInside;
    }

    function eventColor() {
        const colors = ['#bd6c6cdb', '#3e6493db', '#6da855db', '#cd9924db'];
        const index = Math.floor(Math.random() * colors.length);

        return colors[index];
    }

    function setColor(node, color) {
        node.style = `background-color: ${color}`
    }
</script>
</body>
</html>