JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="events">         
    <div class="event" id="event1" draggable="true">Visit Mom</div>
            <div class="event" id="event2" draggable="true">Swim</div>
            <div class="event" id="event3" draggable="true">Ride</div>
</div>          
<div class="schedule">
        <div class="times-column">
        <div class="time">Slot 1</div>
        <div class="time">Slot 2</div>
        <div class="time">Slot 3</div>
        <div class="time">Slot 4</div>
        <div class="time">Slot 5</div>
        <div class="time">Slot 6</div>
        </div>
        <div class="days-row">
            <div class="day">Sunday</div>
            <div class="day">Monday</div>
            <div class="day">Tuesday</div>
            <div class="day">Wednesday</div>
            <div class="day">Thursday</div>
            <div class="day">Friday</div>
            <div class="day">Saturday</div>
            <!-- More days as needed -->
        </div>
        <div class="grid">
            <!-- Grid cells -->
            <div class="cell" id="cell1"></div>
            <div class="cell" id="cell2"></div>
            <div class="cell" id="cell3"></div>
            <div class="cell" id="cell4"></div>
            <div class="cell" id="cell5"></div>
            <div class="cell" id="cell6"></div>
            <div class="cell" id="cell7"></div>
            <div class="cell" id="cell8"></div>
            <div class="cell" id="cell9"></div>
            <!-- Add more cells as needed -->
            <!-- Example of events -->
        </div>
 </div>

CSS

/* styles.css */

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
:root {
    --cell-height: auto;
    --cell-pad: 0px;
    --cell-width: 10vw;
}
#events {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  position: absolute;
  top: 0vh;
  left: 0vw;
}
.schedule {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: auto 1fr;
    gap: 1px;
    background-color: #ccc;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 40vh;
    left: 1vw;
}

.times-column {
    grid-row: 2;
    display: grid;
}

.time {
    background-color: #fff;
    border: 1px solid #ccc;
 /*   height: var(--cell-height);  */
    padding: var(--cell-pad);
}
.cell {
    background-color: #fff;
    border: 1px solid #ccc;
    text-align: center;
    position: relative;
    height: var(--cell-height);
    width:  var(--cell-width);
    padding: var(--cell-pad);
}

.days-row {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.day {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    width:  var(--cell-width);
}
.grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(7, var(--cell-width));
    grid-template-rows: repeat(9, var(--cell-height));
    gap: 1px;
    height: -webkit-fill-available;
}
.event {
    background-color: #ffcccb;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    cursor: grab;
    margin: 5px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const events = document.querySelectorAll('.event');
    const cells = document.querySelectorAll('.cell');
    const times = document.querySelectorAll('.time');

    events.forEach(event => {
        event.addEventListener('dragstart', dragStart);
        event.addEventListener('dragend', dragEnd);
    });

    cells.forEach(cell => {
        cell.addEventListener('dragover', dragOver);
        cell.addEventListener('dragenter', dragEnter);
        cell.addEventListener('dragleave', dragLeave);
        cell.addEventListener('drop', drop);
    });

    function dragStart(e) {
        e.dataTransfer.setData('text/plain', e.target.id);
        setTimeout(() => {
            e.target.classList.add('hide');
        }, 0);
    }

    function dragEnd(e) {
        e.target.classList.remove('hide');
        adjustTimeHeights();
    }

    function dragOver(e) {
        e.preventDefault();
    }

    function dragEnter(e) {
        e.preventDefault();
        e.target.classList.add('hovered');
    }

    function dragLeave(e) {
        e.target.classList.remove('hovered');
    }

    function drop(e) {
        e.target.classList.remove('hovered');
        const id = e.dataTransfer.getData('text/plain');
        const draggable = document.getElementById(id);
        e.target.appendChild(draggable);
        adjustTimeHeights();
    }

    function adjustTimeHeights() {
        const rows = document.querySelectorAll('.grid > .cell');
        const rowHeights = [];

        // Calculate the maximum height for each row
        rows.forEach((cell, index) => {
            const rowIndex = Math.floor(index / 7);
            if (!rowHeights[rowIndex]) {
                rowHeights[rowIndex] = 0;
            }
            rowHeights[rowIndex] = Math.max(rowHeights[rowIndex], cell.scrollHeight);
        });

        // Apply the maximum height to the corresponding time slots
        times.forEach((time, index) => {
           ...