I am in the process of developing a scheduler web tool. Essentially, when a user clicks on two dates, all dates between those two selections will be automatically chosen.
Here is an example to illustrate this functionality:
If the user clicks on day 5: https://i.sstatic.net/dSlrp.png
Next, if they click on day 7: Days 6 and 7 are both magically highlighted.
This demonstration highlights how three consecutive days can be selected within the same week. However, it should also support selecting multiple days across weekends.
For instance, before the weekend starts with the first selection: https://i.sstatic.net/HgxhC.png
The second selection after the weekend, where day 12 is chosen: Weekend days 9 and 10 are not included in the selection.
The challenge in implementing this feature lies in defining the query to target the <td> elements in rows above the clicked element in the table.
So far, I have crafted the following jQuery code snippet for achieving this behavior:
$(document).ready(function () {
$("td.elegible").click(function () {
$(this).children().filter("#event").toggleClass("event");
});
});
The targeted HTML element is structured as follows:
<tr>
<td class="elegible">
<span class="number">@day.Date.Day</span>
<span id="event"/>
</td>
</tr>With this code, clicking on individual days toggles the green highlight accordingly. While this setup enables the selection of consecutive days like 5, 6, and 7, the challenge remains in automatically selecting day 6 upon choosing days 5 and 7. Additionally, preventing the selection of preceding days when no other selections have been made poses another obstacle.
Despite experimenting with various traversal functions (such as parent(), children(), find(), filter()), I have yet to solve this issue. Any guidance or tips in the right direction would be greatly appreciated.