JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<table class="selectable">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
        </tr>
    </thead>
    <tbody>
        <tr data-person="1">
            <td data-day="1">1</td>
            <td data-day="2">2</td>
            <td data-day="3">3</td>
            <td data-day="4">4</td>
            <td data-day="5">5</td>
            <td data-day="6">6</td>
            <td data-day="7">7</td>
        </tr>
        <tr data-person="2">
            <td data-day="1">1</td>
            <td data-day="2">2</td>
            <td data-day="3">3</td>
            <td data-day="4">4</td>
            <td data-day="5">5</td>
            <td data-day="6">6</td>
            <td data-day="7">7</td>
        </tr>
    </tbody>
</table>
<span>Selected: </span><span id="select-result"></span>

CSS

body {
    font-family: Calibri;
}
th {
    background-color: blue;
    color: white;
}
td {
    background-color: #ccc;
}
.selectable .ui-selecting {
    background: #FECA40;
}
.selectable .ui-selected {
    background: #F39814;
    color: white;
}

JavaScript

$('tr').on('mousedown', function (e) {
    //console.log($(this));
    //console.log($(e.target).attr('data-day'));
    $('#drag-start').html($(e.target).attr('data-day'));
}).on('mouseup', function (e) {
    //console.log('stopped');
    //console.log($(e.target).attr('data-day'));
    $('#drag-stop').html($(e.target).attr('data-day'));
});

$(function () {
    $(".selectable").selectable({
    stop: function () {
        var parentRowId= false;

        var result = $("#select-result").empty();
        $("td.ui-selected", this).each(function () {
            if (!parentRowId) {
                parentRowId= $(this).parent('tr').attr('data-person');
                result.append('Person '+parentRowId+': ');
            }
            result.append(" #" + $(this).attr('data-day'));
        });
        
    }
    });

});