我使用一个HTML日历，您可以在其中选择一个日期范围。不幸的是，不可能删除选定的范围。我的想法是用偶数和奇数来解决这个问题：
1.第一次点击（奇数）选择第一天
1.第二次单击（偶数）选择范围
1.第三次点击（奇数）删除所有选择并选择新的第一天
1.第四次单击（偶数）选择新范围
1....
我很高兴得到提示和帮助。我一个人走不了多远。

$(document).ready(function() {
  $('td.day').click(function() {
    if ($("td.firstClick").length == 0) {
      $(this).addClass("firstClick");
    }
  });

  $('td.day').hover(function() {
    if ($("td.firstClick").length == 0) {
      $(this).addClass("selected");
      return;
    }
    
    $(this).addClass("secondClick");
    var tds = $('td.day');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    tds.filter(function() {
      var idx = tds.index(this);
      return idx >= firstClickIndex && idx <= currentIndex;
    }).addClass("selected")
  }, function() {
    if ($("td.firstClick").length == 0) {
      $(this).removeClass("selected");
      return;
    }

    $(this).removeClass("secondClick");
    var tds = $('td.day');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    tds.filter(function() {
      var idx = tds.index(this);
      return idx >= firstClickIndex && idx <= currentIndex;
    }).removeClass("selected")
  });

  $('table').on('click', 'td.secondClick', function() {
    $('.selected').addClass('reserved');
  });
});

table {
  border-collapse: collapse;
}
table tr td {
  width: 14%;
}
table tr td:hover {
  cursor: pointer;
}
.firstClick {
  background: green;
}
.selected {
  background: lightgreen;
}
.reserved {
  background: red !important;
}
.secondClick {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td colspan="7"><b>2016</b>
    </td>
  </tr>
  <tr>
    <td colspan="7"><i>November</i>
    </td>
  </tr>
  <tr>
    <th>mon</th>
    <th>tue</th>
    <th>wed</th>
    <th>thu</th>
    <th>fri</th>
    <th>sat</th>
    <th>sun</th>
  </tr>
  <tr>
    <td></td>
    <td class="day">1</td>
    <td class="day">2</td>
    <td class="day">3</td>
    <td class="day">4</td>
    <td class="day">5</td>
    <td class="day">6</td>
  </tr>
  <tr>
    <td class="day">7</td>
    <td class="day">8</td>
    <td class="day">9</td>
    <td class="day">10</td>
    <td class="day">11</td>
    <td class="day">12</td>
    <td class="day">13</td>
  </tr>
  <tr>
    <td class="day">14</td>
    <td class="day">15</td>
    <td class="day">16</td>
    <td class="day">17</td>
    <td class="day">18</td>
    <td class="day">19</td>
    <td class="day">20</td>
  </tr>
  <tr>
    <td class="day">21</td>
    <td class="day">22</td>
    <td class="day">23</td>
    <td class="day">24</td>
    <td class="day">25</td>
    <td class="day">26</td>
    <td class="day">27</td>
  </tr>
  <tr>
    <td class="day">28</td>
    <td class="day">29</td>
    <td class="day">30</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>