I develop a calendar, and I want to simulate the function of a "calendar range", that is, select a start date and end date, like this
For the calendar, it's in an html table
<div id="dncalendar-body" class="dncalendar-body">
<table>
<thead>
<tr>
<td>D</td>
<td>L</td>
<td>M</td>
<td>M</td>
<td>J</td>
<td>V</td>
<td>S</td>
</tr>
</thead>
<tbody>
<tr>
<td class="" data-date="30" data-month="9" data-year="2018">
<div class="entry">30</div>
</td>
<td class="" data-date="1" data-month="10" data-year="2018">
<div class="entry">1</div>
</td>
<td class="" data-date="2" data-month="10" data-year="2018">
<div class="entry">2</div>
</td>
<td class="" data-date="3" data-month="10" data-year="2018">
<div class="entry">3</div>
</td>
<td class="" data-date="4" data-month="10" data-year="2018">
<div class="entry">4</div>
</td>
<td class="" data-date="5" data-month="10" data-year="2018">
<div class="entry">5</div>
</td>
<td class="" data-date="6" data-month="10" data-year="2018">
<div class="entry">6</div>
</td>
</tr>
<tr>
<td class="" data-date="7" data-month="10" data-year="2018">
<div class="entry">7</div>
</td>
<td class="" data-date="8" data-month="10" data-year="2018">
<div class="entry">8</div>
</td>
<td class="" data-date="9" data-month="10" data-year="2018">
<div class="entry">9</div>
</td>
<td class="" data-date="10" data-month="10" data-year="2018">
<div class="entry">10</div>
</td>
<td class="" data-date="11" data-month="10" data-year="2018">
<div class="entry">11</div>
</td>
<td class="" data-date="12" data-month="10" data-year="2018">
<div class="entry">12</div>
</td>
<td class="" data-date="13" data-month="10" data-year="2018">
<div class="entry">13</div>
</td>
</tr>
<tr>
<td class="" data-date="14" data-month="10" data-year="2018">
<div class="entry">14</div>
</td>
<td class="" data-date="15" data-month="10" data-year="2018">
<div class="entry">15</div>
</td>
<td id="calendarClick" class=" today-date calendarClick" data-date="16" data-month="10" data-year="2018">
<div class="entry" data-title="hoy">16</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="17" data-month="10" data-year="2018">
<div class="entry">17</div>
</td>
<td id="" class="" data-date="18" data-month="10" data-year="2018">
<div class="entry">18</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="19" data-month="10" data-year="2018">
<div class="entry">19</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="20" data-month="10" data-year="2018">
<div class="entry">20</div>
</td>
</tr>
<tr>
<td id="calendarClick" class=" calendarClick" data-date="21" data-month="10" data-year="2018">
<div class="entry">21</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="22" data-month="10" data-year="2018">
<div class="entry">22</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="23" data-month="10" data-year="2018">
<div class="entry">23</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="24" data-month="10" data-year="2018">
<div class="entry">24</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="25" data-month="10" data-year="2018">
<div class="entry">25</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="26" data-month="10" data-year="2018">
<div class="entry">26</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="27" data-month="10" data-year="2018">
<div class="entry">27</div>
</td>
</tr>
<tr>
<td id="calendarClick" class=" calendarClick" data-date="28" data-month="10" data-year="2018">
<div class="entry">28</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="29" data-month="10" data-year="2018">
<div class="entry">29</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="30" data-month="10" data-year="2018">
<div class="entry">30</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="31" data-month="10" data-year="2018">
<div class="entry">31</div>
</td>
<td id="calendarClick" class=" " data-date="1" data-month="11" data-year="2018">
<div class="entry">1</div>
</td>
<td id="calendarClick" class=" " data-date="2" data-month="11" data-year="2018">
<div class="entry">2</div>
</td>
<td id="calendarClick" class=" " data-date="3" data-month="11" data-year="2018">
<div class="entry">3</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/MDcalendar.js"></script>
</body></html>
I use the .slice function of jquery.
$('table tbody td').slice(1,5).addClass("range");
and I do it with the indexes of the cells in the table, but, for example, the index of day 22 is the same for the following month, with a different day
It is possible to use the "data" of the cells as index in the slide function