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>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>