Question

I need to select all td’s within my table with a drag event. What I am trying to achieve is to create a date range based on my first selected td, until the last selected td, but they can span over multiple rows.
At the moment, I am using nextUntil() with andSelf() to include the last selected, but it only selects td’s within the current tr.
Below is a sample of my code.
Any help please.

this.BindCalendarMouseDrag = function () {
        var isMouseDown = false;
        var isHighlighted;
        var selectedDays = [];
        $(".tabCalendarContainer tr.trCalWeek td")
            .mousedown(function () {
                isMouseDown = true;
                $(this).addClass("highlighted");
                isHighlighted = $(this).hasClass("highlighted");
                selectedDays.push($(this));
                return false; // prevent text selection
            })
            .mouseover(function () {
                if (isMouseDown) {
                    $(this).addClass("highlighted", isHighlighted);

                    var firstSelectedDay = selectedDays[0];
                    firstSelectedDay.nextUntil($(this)).andSelf().add($(this)).addClass("highlighted", isHighlighted);

                    selectedDays.push($(this));
                }
            })
            .bind("selectstart", function () {
                return false;
            });

        $(document).mouseup(function () {
            isMouseDown = false;
            //alert(selectedDays.length);
        });
    };

Answer 1

I took the liberty of constructing a fiddle that illustrates a calendar with draggable weekdays. It doesn’t cater for BACKWARDS dragging yet, but you should be able to easily adjust the code to accommodate it.

$(document).ready(function () {
    $("td.week").hover(
        function () { $(this).addClass("hover"); },
        function () { $(this).removeClass("hover"); }
    );
    var busySelecting = false;
    var selectedDays = [];
    var contains = function(day) {
        for (var d in selectedDays) {
            if (selectedDays[d].text() == day.text())
                return true;
        }
        return false;
    };
    $("td.week").mousedown(function () {
        selectedDays = [];
        $("td.week").removeClass("selected");
        busySelecting = true;
        if ($(this).text() != "") {
            $(this).addClass("selected");
            selectedDays.push($(this));
        }
        return false;
    });
    $("td.week").mouseover(function () {
        if (busySelecting &&
           $(this).text() != "")
        {
            var busyHovering = $(this);
            $("td.week").each(function () {
                if ($(this).text() != "" &&
                    parseInt($(this).text(),10) > parseInt(selectedDays[0].text(),10) &&
                    parseInt($(this).text(),10) <= parseInt(busyHovering.text(),10) &&
                    !contains($(this))) {
                    $(this).addClass("selected");
                    selectedDays.push($(this));                
                }
            });
            $(selectedDays).each(function () {
                if (parseInt($(this).text(),10) > parseInt(busyHovering.text(),10)) {
                    $(this).removeClass("selected");
                    selectedDays.pop($(this));
                }
            });
            selectedDays.push($(this));
        }
    });
    $(document).mouseup(function () {
        busySelecting = false;
        alert("You selected the following range: " +
              selectedDays[0].text() + " - " +
              selectedDays[selectedDays.length - 1].text());
    });
});

td
{
    padding:10px;
    cursor:default;
}
td.hover
{
    background:#EEE;
}
td.weekend
{
    background:silver;
}
td.selected
{
    background:#5EE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
    <tr>
        <td class="weekend"></td>
        <td class="week"></td>
        <td class="week">1</td>
        <td class="week">2</td>
        <td class="week">3</td>
        <td class="week">4</td>
        <td class="weekend">5</td>
    </tr>
    <tr>
        <td class="weekend">6</td>
        <td class="week">7</td>
        <td class="week">8</td>
        <td class="week">9</td>
        <td class="week">10</td>
        <td class="week">11</td>
        <td class="weekend">12</td>
    </tr>
    <tr>
        <td class="weekend">13</td>
        <td class="week">14</td>
        <td class="week">15</td>
        <td class="week">16</td>
        <td class="week">17</td>
        <td class="week">18</td>
        <td class="weekend">19</td>
    </tr>
    <tr>
        <td class="weekend">20</td>
        <td class="week">21</td>
        <td class="week">22</td>
        <td class="week">23</td>
        <td class="week">24</td>
        <td class="week">25</td>
        <td class="weekend">26</td>
    </tr>
    <tr>
        <td class="weekend">27</td>
        <td class="week">28</td>
        <td class="week">29</td>
        <td class="week">30</td>
        <td class="week">31</td>
        <td class="week"></td>
        <td class="weekend"></td>
    </tr>
</table>