JSFiddle - React, Tailwind, and code Playground

HTML

<div id="reservation-sheet" style="display: block;">
  <table>
    <thead>
      <tr>
        <th>Boat Size</th>
        <th>8:00</th>
        <th>8:30</th>
        <th>9:00</th>
        <th>9:30</th>
        <th>10:00</th>
        <th>10:30</th>
        <th>11:00</th>
        <th>11:30</th>
        <th>12:00</th>
        <th>12:30</th>
        <th>1:00</th>
        <th>1:30</th>
        <th>2:00</th>
        <th>2:30</th>
        <th>3:00</th>
        <th>3:30</th>
        <th>4:00</th>
        <th>4:30</th>
        <th>5:00</th>
        <th>5:30</th>
        <th>6:00</th>
      </tr>
    </thead>
    <tbody>
      <tr id="0">
        <td id="0-size" class="boat-size">20' <small>(8 ppl max)</small></td>
        <td id="0-8.00" class="open">&nbsp;</td>
        <td id="0-8.50" class="open">&nbsp;</td>
        <td id="0-9.00" class="open">&nbsp;</td>
        <td id="0-9.50" class="open">&nbsp;</td>
        <td id="0-10.00" class="open">&nbsp;</td>
        <td id="0-10.50" class="open">&nbsp;</td>
        <td id="0-11.00" class="open">&nbsp;</td>
        <td id="0-11.50" class="open">&nbsp;</td>
        <td id="0-12.00" class="open">&nbsp;</td>
        <td id="0-12.50" class="open">&nbsp;</td>
        <td id="0-13.00" class="open">&nbsp;</td>
        <td id="0-13.50" class="open">&nbsp;</td>
        <td id="0-14.00" class="open">&nbsp;</td>
        <td id="0-14.50" class="open">&nbsp;</td>
        <td id="0-15.00" class="open">&nbsp;</td>
        <td id="0-15.50" class="open">&nbsp;</td>
        <td id="0-16.00" class="open">&nbsp;</td>
        <td id="0-16.50" class="open">&nbsp;</td>
        <td id="0-17.00" class="open">&nbsp;</td>
        <td id="0-17.50" class="open">&nbsp;</td>
        <td id="0-18.00" class="open">&nbsp;</td>
      </tr>
      <tr id="1">
        <td id="1-size" class="boat-size">20' <small>(8 ppl max)</small></td>
        <td id="1-8.00" class="open">&nbsp;</td>
        <td id="1-8.50" class="open">&nbsp;</td>
        <td id="1-9.00"...

CSS

table {
  width: 100%;
}

th,
td {
  border: 2px solid #000;
  text-align: center;
}

tr {
  background-color: #CCC;
}

#reservation-sheet td.ui-selecting {
  background-color: #FECA40;
}

#reservation-sheet td.ui-selected {
  background-color: #F39814;
}

JavaScript

var startingRow = 0;
var startingTime = 0;
$('#reservation-sheet').selectable({
  filter: 'tr, td', //lets filter to tr and td
  start: function(event, ui) {
    var startingItem = $('.ui-selecting', this);
    startingRow = startingItem.prop('id'); //should be the ID of the starting row
    startingTime = startingItem.last().prop('id'); //should be the id of the starting cell
  },
  selecting: function(event, ui) {
    var selectingItems = $('.ui-selecting', this);
    //during the selecting process lets make sure we limit to 1 row
    if (selectingItems.prop('id') != startingRow) {
      selectingItems.not(':first').removeClass('ui-selecting');
    }
  },
  stop: function(event, ui) {
    var selectedItems = $('.ui-selected', this);
    var endTime = selectedItems.last().prop('id'); //in theory this should be the last selcted cell
    //$.post('contact.php', {sTime: startingTime, eTime: endTime, id: startingRow}, function(data, status) {
    //pop-up window to get name, email and phone number
    //then submit everything
    //});
  }
});