JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<table>
  <tr>
    <td>M</td>
    <td>T</td>
    <td>W</td>
    <td>T</td>
    <td>F</td>
    <td>Sa</td>
    <td>Su</td>
  </tr>
  <tr>
    <td>M</td>
    <td>T</td>
    <td>W</td>
    <td>T</td>
    <td>F</td>
    <td>Sa</td>
    <td>Su</td>
  </tr>
  <tr>
    <td>M</td>
    <td>T</td>
    <td>W</td>
    <td>T</td>
    <td>F</td>
    <td>Sa</td>
    <td>Su</td>
  </tr>
  <tr>
    <td>M</td>
    <td>T</td>
    <td>W</td>
    <td>T</td>
    <td>F</td>
    <td>Sa</td>
    <td>Su</td>
  </tr>
</table>

CSS

td {
  padding: 30px;
}

.selected {
  background: #f2f2f2;
}

.active {
  background: green;
}

JavaScript

let startIndex = -1;
let endIndex = -1;

$('td').on('click', function() {
	
  let index = $('td').index(this);
	
  if (endIndex > -1) {
  	reset();
    
  	startIndex = index;
    $(this).addClass('selected');
    
  } else if (startIndex > -1) {
  	endIndex = index;
    
  } else {
  	startIndex = index;
    $(this).addClass('selected');
  }
  
  if (startIndex > -1 && endIndex > -1) {
  	$('td.selected').removeClass('selected');
  	$('td').slice(startIndex, endIndex + 1).addClass('active');
  }
  
});

function reset() {
	startIndex = -1;
	endIndex = -1;
  
  $('td.active').removeClass('active');
}