Skip to content

jQuery: Draggable div creating Clone initially, then not after being dropped

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/[email protected]/dist/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/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>

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/[email protected]/dist/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/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>