demo.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery Selection Demo</title>

  <link rel="stylesheet" type="text/css" href="jquery.selection.css">
  <style type="text/css">
    td {
      border: 1px solid #ddd;
      width: 50px;
      height: 25px;
      font-size: 8pt;
      cursor: pointer;
    }
  </style>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
  <script src="jquery.selection.js"></script>
  <script type="text/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);
        }
      }
    }

    $(document).ready(function(){
      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');
        }
      });
    });

  </script>

</head>
<body>

  <br>
  <table id="calendar"></table>
  <span id="info"></span>

</body>
</html>