JSFiddle - React, Tailwind, and code Playground

by Tim Büthe

HTML

<script src="https://raw.github.com/timbuethe/jquery-selection/master/jquery.selection.js"></script>
<table id="calendar"></table>
<span id="info"></span>

CSS

td {
      border: 1px solid #ddd;
      width: 50px;
      height: 25px;
      font-size: 8pt;
      cursor: pointer;
    }

JavaScript

function createTable(){

    var $calendar = $('#calendar'),
        $row,
        monthDays = [null, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    for(var month=1; month <= 12; month++){
        $row = $('<tr/>').appendTo($calendar);
        for(var day=1; day <= monthDays[month]; day++){
          $('<td/>').text(day).appendTo($row);
        }
      }
}

createTable();



$('#calendar').selection({
    filter: 'td',
    stop: function(event, selection){
    
      var elements = selection.elements,
          from = $(elements[0]).text(),
          to = $(elements[elements.length-1]).text();
    
      $('#info')
              .text('selected: ' + from + ' - ' + to)
              .effect('highlight');
      $('#calendar').selection('clear');
    }
});