La IceKid La IceKid - 21 days ago 5
HTML Question

HTML Calendar remove selection after first booked class Jquery

this calendar is for date range booking. when user selects first date, jquery is changing td background (makes selection) from first click to cursor current position. Now problem is that selection must stop when meets first booking class. with

.not('.booked')
i did that it ignors booked days but continuing select after anyway. Thanks



$(document).ready(function() { //START of date range selection
$('td.days').click(function() {
if ($("td.firstClick").length == 0) {
$(this).addClass("firstClick");
}
});

$('td.days').hover(function() {
if ($("td.firstClick").length == 0) {
$(this).addClass("selected");
return;
}
$(this).addClass("secondClick");
var tds = $('td.days');
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;
}).not('.booked').addClass("selected")
}, function() {
if ($("td.firstClick").length == 0) {
$(this).removeClass("selected");
return;
}
$(this).removeClass("secondClick");
var tds = $('td.days');
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:not(.booked)', function() {
$('.selected').addClass('reserved');
});
}); //END of date range selection

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;
}
.booked{
background:#ffdede;
}

<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="days">1</td>
<td class="days">2</td>
<td class="days">3</td>
<td class="days">4</td>
<td class="days">5</td>
<td class="days">6</td>
</tr>
<tr>
<td class="days">7</td>
<td class="days">8</td>
<td class="days">9</td>
<td class="days">10</td>
<td class="days">11</td>
<td class="days">12</td>
<td class="days">13</td>
</tr>
<tr>
<td class="days">14</td>
<td class="days booked">15</td>
<td class="days booked">16</td>
<td class="days booked">17</td>
<td class="days">18</td>
<td class="days">19</td>
<td class="days">20</td>
</tr>
<tr>
<td class="days">21</td>
<td class="days">22</td>
<td class="days">23</td>
<td class="days">24</td>
<td class="days">25</td>
<td class="days">26</td>
<td class="days">27</td>
</tr>
<tr>
<td class="days">28</td>
<td class="days">29</td>
<td class="days">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>




Answer

OK, as I mentioned in my comment, you have to check if there is a cell in your table with the .booked class. If so, then check the currentIndex against this cell index, if currentIndex was greater than this cell index, then change the currentIndex to the first cell index with .booked class.

the JavaScript part that needs to be changed $('td.days').hover(function() would be like this:

$('td.days').hover(function() {
    if ($("td.firstClick").length == 0) {
        $(this).addClass("selected");
        return;
    }
    $(this).addClass("secondClick");
    var tds = $('td.days');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    if ($("td.booked").length > 0) {
        var tdsBooked = $('td.booked');
        tdsBooked = tdsBooked.filter(function() {
            var idx = tds.index(this);
            return idx > firstClickIndex;
        });
        var nextBooked = tdsBooked.first();
        var nextBookedIndex = tds.index(nextBooked);

        if((currentIndex > nextBookedIndex) && (firstClickIndex < nextBookedIndex))
            currentIndex = nextBookedIndex;
    }
    tds.filter(function() {
        var idx = tds.index(this);
        return idx >= firstClickIndex && idx <= currentIndex;
    }).not('.booked').addClass("selected")
}, function() {
    if ($("td.firstClick").length == 0) {
        $(this).removeClass("selected");
        return;
    }
    $(this).removeClass("secondClick");
    var tds = $('td.days');
    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")
});