Spezielle Auswahl jquery Wählbar

Question

Ich habe ein Kalenderraster (für Monat). Und ich möchte Periode für Ereignis wählen. Wie auf dem Bild:
Bild 1.

---

Bild 2.

Wie kann ich implementieren eine solche Auswahl (wenn der Benutzer ziehen nach unten mit der Maus über die Zellen (8 , 15, 22 auf dem Bild) wählt er alle Wochen aus, die die Zellen schneiden (Bild 2)).
Es scheint, JQuery UI wählbare Plugin hilft nicht bei der Auswahl (es würde nur 3 Zellen (8, 15, 22)) auswählen. Vielleicht kann es oder es gibt andere Bibliotheken, die dazu beitragen. Vielleicht kann es mit plain js behoben werden ...
Bitte etwas beraten.

Answer 1

Ich habe eine gemacht, wo Sie klicken und ziehen können. Im Grunde erhält jeder eine eindeutige ID, dann markieren wir alle links schwebenden Elemente zwischen Anfang und Ende.

mouseDown = null; 
 
from = null; 
 
$("div").each(function (i) { 
 
    $(this).attr("data-id",i); 
 
}); 
 
$("div").on("mousedown", function() { 
 
    mouseDown = $(this).attr("data-id"); 
 
}).on("mousemove", function() { 
 
    if (mouseDown) { 
 
    mouseUp = $(this).attr("data-id"); 
 
    $("div").each(function (i) { 
 
     if (i >= mouseDown && i <= mouseUp) { 
 
     $(this).css("background","red"); 
 
     } 
 
    }); 
 
    } 
 
}).on("mouseup", function(){ 
 
    mouseDown = null; 
 
});

div { 
 
    width:50px; 
 
    height:50px; 
 
    float:left; 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>