bootstrap实现可拖拽修改删除日程表效果代码
代码语言：html
所属分类：拖放
代码描述：bootstrap实现可拖拽修改删除日程表效果代码，可显示团队每个成员的一周日程安排，可以拖拽分配任务，还可以修改删除。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.5.2.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
<style>
.opt-tools {
height: 100%;
width: 25px;
right: -21px;
position: absolute;
border: 1px solid #e8e8e8;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.opt-edit,
.opt-trash {
height: 50%;
line-height: 25px;
text-align: center;
font-size: 13px;
cursor: pointer;
}
.opt-edit {
border-bottom: 1px solid #e8e8e8;
border-top-right-radius: 8px;
background-color: #fff;
color: #ff8e00;
}
.opt-edit:hover {
color: #fff;
background-color: #ff8e00;
}
.opt-trash {
border-bottom-right-radius: 8px;
background-color: #fff;
color: #cc0000;
}
.opt-trash:hover {
color: #fff;
background-color: #cc0000;
}
/* LOCK HEADER AND FIRST COLUMN */
.table td,
.table th {
padding: 5px !important;
}
th:first-child {
position: sticky;
left: 0;
z-index: 1030;
}
td:first-child {
position: sticky;
left: 0;
z-index: 1010;
}
thead th {
position: sticky;
top: 0;
z-index: 1020;
}
/* ---------- END (LOCK HEADER AND FIRST COLUMN ) --------- */
.datetimepicker {
width: 70% !important;
height: 70% !important;
}
.cal-container {
max-width: 900px;
max-height: 500px;
overflow: auto;
margin: auto;
}
.cal-table {
position: relative;
border: solid #ebebeb;
border-width: 0 1px 0 0;
overscroll-behavior: contain;
}
.cal-thead {
top: 0px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.04);
}
.cal-viewmonth {
font-size: 16px;
background: #fdfdfd;
width: 150px;
height: 50px;
}
.cal-toprow {
width: 182px;
min-width: 182px;
color: #3e5569;
background-color: #f7f9fb !important;
border: 1px solid #ebebeb !important;
}
.cal-viewmonth,
.cal-toprow {
font-weight: 700 !important;
text-align: center;
vertical-align: middle !important;
}
.cal-userinfo {
height: 80px;
box-shadow: 20px 0 50px rgba(0, 0, 0, 0.05);
}
.cal-tbody .cal-userinfo {
min-width: 150px !important;
text-align: right;
color: hsla(210, 5%, 40%, 1);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.03em;
background: #fdfdfd;
padding: 0.3em;
border: 1px solid #ebebeb;
}
.cal-usersheader {
height: 20px;
box-shadow: 20px 0 50px rgba(0, 0, 0, 0.05);
min-width: 150px !important;
text-align: center;
font-weight: bold;
font-size: 15px;
letter-spacing: 0.03em;
padding: 0.3em;
}
.weekend {
background-color: #b5b5b5;
}
.drag {
z-index: 10;
cursor: all-scroll;
}
.span-info {
display: inline-block;
padding: 0.25em 0.4em;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
width: 25px;
background-color: red;
cursor: pointer;
}
.ui-draggable-dragging {
z-index: 9999 !important;
}
.cal-usercounter {
bottom: 0;
right: 0;
position: absolute;
text-align: right;
border-radius: 0px;
border: 2px thick red;
}
.cal-userbadge {
border-radius: 0;
font-weight: 600;
font-size: 11px;
}
/* USER TASKS */
.details {
border-radius: 4px;
background: #fff;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid #ebecee;
padding: 0px 0px 5px 10px;
margin: 2px;
z-index: 1;
}
.details-uren {
font-size: 12px;
color: #333;
font-weight: 500;
margin: 0;
right: 0px;
text-align: right;
padding-right: 10px;
}
.details-task {
margin-top: 5px;
margin-bottom: 2px;
font-size: 12px;
padding: 2px 5px;
font-weight: 600;
line-height: 1.4;
border-radius: 2px;
width: 94%;
}
</style>
</head>
<body translate="no">
<div class="row justify-content-center align-items-center" style="padding-bottom:25px;">
<div style="padding-top: 20px; text-align:center;">
<div>
<h2>Drag And Drop Calendar/Scheduler</h2>
</div>
<div>
<span>Drag and drop tasks wherever you want on the calendar/scheduler</span><br>
<span>Hover on a task to edit or delete the specific task.</span>
</div>
</div>
</div>
<!-- DISPLAY USER SCHEDULER-->
<div class="table-responsive">
<div data-parse="1595877840000" id="calplaceholder" style="max-height: 500px; margin-bottom: 0;">
<div class="cal-sectionDiv">
<table class="table table-striped table-bordered">
<thead class="cal-thead">
<tr>
<th class="cal-viewmonth" id="changemonth">juli 2020</th>
<th class="cal-toprow">Wednesday 1</th>
<th class="cal-toprow">Thursday 2</th>
<th class="cal-toprow">Friday 3</th>
<th class="cal-toprow weekend">Saturday 4</th>
<th class="cal-toprow weekend">Sunday 5</th>
<th class="cal-toprow">Monday 6</th>
<th class="cal-toprow">Tuesday 7</th>
<th class="cal-toprow">Wednesday 8</th>
<th class="cal-toprow">Thursday 9</th>
<th class="cal-toprow">Friday 10</th>
<th class="cal-toprow weekend">Saturday 11</th>
<th class="cal-toprow weekend">Sunday 12</th>
<th class="cal-toprow">Monday 13</th>
<th class="cal-toprow">Tuesday 14</th>
<th class="cal-toprow">Wednesday 15</th>
<th class="cal-toprow">Thursday 16</th>
<th class="cal-toprow">Friday 17</th>
<th class="cal-toprow weekend">Saturday 18</th>
<th class="cal-toprow weekend">Sunday 19</th>
<th class="cal-toprow">Monday 20</th>
<th class="cal-toprow">Tuesday 21</th>
<th class="cal-toprow">Wednesday 22</th>
<th class="cal-toprow">Thursday 23</th>
<th class="cal-toprow">Friday 24</th>
<th class="cal-toprow weekend">Saturday 25</th>
<th class="cal-toprow weekend">Sunday 26</th>
<th class="cal-toprow">Monday 27</th>
<th class="cal-toprow">Tuesday 28</th>
<th class="cal-toprow">Wednesday 29</th>
<th class="cal-toprow">Thursday 30</th>
<th class="cal-toprow">Friday 31</th>
</tr>
</thead>
<tbody class="cal-tbody">
<tr id="h16">
<td class="cal-usersheader" style="color:#000; background-color:#389fe8; padding: 0px;">Team 1</td>
<td colspan="31" style="color:#FFFFFF; background-color:#389fe8;"></td>
</tr>
<tr id="u1">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Van Els</b> Numan<span></span></span>
<div class="cal-usercounter">
<span class="cal-userbadge badge badge-light">140:13</span><span class="cal-userbadge badge badge-warning">134:36</span>
</div>
<div class="cal-userarrows">
<i class="up mdi mdi-arrow-up-bold"></i><i class="down mdi mdi-arrow-down-bold"></i>
</div>
</td>
<td class="ui-droppable" data-date="1/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13956" data-userid="1" style="border-left: 5px solid rgb(81, 255, 0); position: relative;">
<h3 class="details-task" style=" background: #51FF00; color: #000000">Training</h3>
<div class="details-uren">
15:00 - 16:30
</div>
</div>
</td>
<td class="ui-droppable" data-date="2/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13957" data-userid="1" style="border-left: 5px solid rgb(121, 32, 32); position: relative;">
<h3 class="details-task" style=" background: #792020; color: #FFFFFF">Day Shift</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="3/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13959" data-userid="1" style="border-left: 5px solid rgb(175, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #AF0000; color: #FFFFFF">Sick</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="4/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13958" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:30 - 16:30
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="5/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12179" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="6/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12316" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="7/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12117" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="8/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12336" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
12:00 - 19:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="9/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12346" data-userid="1" style="border-left: 5px solid rgb(189, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #BD0000; color: #FFFFFF">Extra shift</h3>
<div class="details-uren">
13:00 - 20:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="10/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12137" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="11/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12366" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="12/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12376" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="13/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12386" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
17:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="14/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12396" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="15/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12406" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="16/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12416" data-userid="1" style="border-left: 5px solid rgb(189, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #BD0000; color: #FFFFFF">Extra shift</h3>
<div class="details-uren">
20:00 - 03:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="17/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12426" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
21:00 - 04:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="18/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12436" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="19/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12446" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="20/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12456" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
00:00 - 07:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="21/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12466" data-userid="1" style="border-left: 5px solid rgb(30, 137, 90); position: relative;">
<h3 class="details-task" style=" background: #1E895A; color: #FFFFFF">Vacation</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="22/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12476" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
02:00 - 09:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="23/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13960" data-userid="1" style="border-left: 5px solid rgb(175, 0, 0); position: relative;">
<h3 class="details-task" style=" background: #AF0000; color: #FFFFFF">Sick</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="24/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12496" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
04:00 - 11:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="25/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12506" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
05:00 - 12:00
</div>
</div>
</td>
<td class="weekend ui-droppable" data-date="26/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12516" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="27/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12526" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
07:00 - 14:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="28/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13950" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="29/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12546" data-userid="1" style="border-left: 5px solid rgb(36, 115, 171); position: relative;">
<h3 class="details-task" style=" background: #2473AB; color: #FFFFFF">Late shift</h3>
<div class="details-uren">
09:00 - 16:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="30/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="13949" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
<td class="ui-droppable" data-date="31/7/2020" data-userid="1">
<div class="drag details ui-draggable ui-draggable-handle" data-taskid="12536" data-userid="1" style="border-left: 5px solid rgb(126, 126, 126); position: relative;">
<h3 class="details-task" style=" background: #7E7E7E; color: #FFFFFF">Rest</h3>
<div class="details-uren">
00:00 - 00:00
</div>
</div>
</td>
</tr>
<tr id="u2">
<td class="cal-userinfo">
<span><b style="text-decoration: underline">Henzen</b> Susanna<span></span></span>
<div class="cal-usercounter">
<span class="cal-userbadge badge badge-light">140:13</span><span class="cal-userbadge badge badge-warning">134:36</span>
</div>
<div class="cal-userarrows">
<i class="up mdi mdi-arrow-up-bold"></i><i class="down mdi mdi-arrow-down-bold"></i>
</div>
</td>
<td class="ui-droppa.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0