I have a draggable div and a table. I want to be able to drop a clone of the div into the table, then once it’s dropped in the table, drag the div inside the table from one cell to another without creating a clone.
However currently when I attempt to drag a div that has already been dropped into the table from one cell into another, it creates a duplicate. How can I avoid this?
$(function() { $( ".draggable" ).draggable( { helper: "clone", revert: "invalid", connectToSortable: "#droppable" } ); $('.droppable td').droppable({ drop: function (event, ui) { var parenttd = $(this).attr('id'); var cloned = $(ui.helper).clone(); cloned.attr("visible", "true"); $(this).append(cloned); cloned.css({ "position:": "relative", "top": "auto", "left": "auto" }); cloned.draggable({ revert: "invalid", connectToSortable: "#droppable" }); } }) });
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script> <script src="https://unpkg.com/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="draggable kalender-element">Test</div> <table class="droppable table table-hover table-bordered"> <thead style="text-align:center;"> <tr> <th class="align-middle" scope="col" rowspan=3>Kalenderwoche<br>39</th> <th scope="col" colspan=2>Montag</th> <th scope="col" colspan=2>Dienstag</th> <th scope="col" colspan=2>Mittwoch</th> <th scope="col" colspan=2>Donnerstag</th> <th scope="col" colspan=2>Freitag</th> </tr> </tr> <th scope="col" colspan=2>27.09.2021</th> <th scope="col" colspan=2>28.09.2021</th> <th scope="col" colspan=2>29.09.2021</th> <th scope="col" colspan=2>30.09.2021</th> <th scope="col" colspan=2>01.10.2021</th> </tr> </tr> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> </tr> </thead> <tbody> <tr style="background-color: #ececec" > <th id="sortable" scope="row">1</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">2</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">3</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">4</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> </tr> <tr > <th id="sortable" scope="row">5</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">6</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> </tr> <tr > <th id="sortable" scope="row">7</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> </tr> <tr > <th id="sortable" scope="row">8</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> </tbody> </table>
Advertisement
Answer
I finally figured out a way! I simply had to remove the helper in the drop-event.
$(function() { $( ".draggable" ).draggable( { helper: "clone", revert: "invalid", connectToSortable: "#droppable" }); $('.droppable td').droppable({ drop: function (event, ui) { var parenttd = $(this).attr('id'); var cloned = $(ui.helper).clone(); cloned.attr("visible", "true"); $(this).append(cloned); cloned.css({ "position:": "relative", "top": "auto", "left": "auto" }); cloned.draggable({ revert: "invalid", connectToSortable: "#droppable" }); $(ui.helper).remove(); } }) });
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script> <script src="https://unpkg.com/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="draggable kalender-element">Test</div> <table class="droppable table table-hover table-bordered"> <thead style="text-align:center;"> <tr> <th class="align-middle" scope="col" rowspan=3>Kalenderwoche<br>39</th> <th scope="col" colspan=2>Montag</th> <th scope="col" colspan=2>Dienstag</th> <th scope="col" colspan=2>Mittwoch</th> <th scope="col" colspan=2>Donnerstag</th> <th scope="col" colspan=2>Freitag</th> </tr> </tr> <th scope="col" colspan=2>27.09.2021</th> <th scope="col" colspan=2>28.09.2021</th> <th scope="col" colspan=2>29.09.2021</th> <th scope="col" colspan=2>30.09.2021</th> <th scope="col" colspan=2>01.10.2021</th> </tr> </tr> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> <th scope="col">Vormittag</th> <th scope="col">Nachmittag</th> </tr> </thead> <tbody> <tr style="background-color: #ececec" > <th id="sortable" scope="row">1</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">2</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">3</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">4</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> </tr> <tr > <th id="sortable" scope="row">5</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> <tr > <th id="sortable" scope="row">6</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> </tr> <tr > <th id="sortable" scope="row">7</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> </tr> <tr > <th id="sortable" scope="row">8</th> <td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; "> Hotline</a> </td> <td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" "> Ticket-Support</a> </td> <td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" > <a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; "> Servicepoint</a> </td> <td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" > </td> <td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" > </td> </tr> </tbody> </table>