bootstrap拖拽事件到全屏日历上实现时间待办事项效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：bootstrap拖拽事件到全屏日历上实现时间待办事项效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html dir="ltr" lang="en" class="no-outlines">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Stylesheets -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fullcalendar.3.8.2.css">
    <style>
        html,body {
        	height:100%;
        }
        body {
        	color:#999;
        	background-color:#ebebea;
        	font-family:"Open Sans",sans-serif;
        	font-size:14px;
        	line-height:24px;
        	font-weight:400;
        	word-wrap:break-word;
        }
        label {
        	display:block;
        	margin-bottom:0;
        }
        label + label {
        	margin-top:10px;
        }
        .btn-group >label + label {
        	margin-top:0;
        }
        .form-inline label + label {
        	margin-top:0;
        }
        .label-text {
        	display:inline-block;
        	margin-bottom:8px;
        	color:#696969;
        	font-weight:700;
        }
        /* 5.2. CALENDAR */.fc .fc-button {
        	float:none;
        	height:auto;
        	margin-left:5px;
        	margin-bottom:5px;
        	padding:4px 20px;
        	background-color:#f8f8f8;
        	background-image:none;
        	border:1px solid #f8f8f8;
        	border-radius:2px;
        	box-shadow:none;
        	text-transform:capitalize;
        	-webkit-transition:color .25s,border-color .25s;
        	transition:color .25s,border-color .25s;
        }
        .fc .fc-basicDay-button {
        	margin-left:20px;
        }
        .fc .fc-state-active {
        	border-color:#e16123;
        }
        .fc-toolbar.fc-header-toolbar {
        	margin-bottom:0;
        }
        .fc-toolbar .fc-right {
        	float:none;
        	text-align:right;
        }
        .fc-toolbar .fc-center {
        	display:block;
        	width:100%;
        	margin-top:15px;
        	color:#fff;
        	background-color:#2bb3c0;
        	border-radius:2px 2px 0 0;
        	clear:both;
        }
        .fc-toolbar .fc-center:after {
        	content:" ";
        	display:block;
        	clear:both;
        }
        .fc-toolbar h2 {
        	padding:12px 0;
        	font-size:16px;
        	line-height:26px;
        	font-weight:600;
        	text-transform:uppercase;
        }
        .fc .fc-toolbar h2 {
        	float:none;
        	margin-left:0;
        }
        .fc-center .fc-button {
        	float:left;
        	margin-bottom:0;
        	padding:12px 20px;
        	color:#fff;
        	background-color:transparent;
        	border-width:0;
        	font-size:16px;
        	line-height:26px;
        }
        .fc-center .fc-next-button {
        	float:right;
        }
        .fc-widget-header th {
        	padding-top:5px;
        	padding-bottom:5px;
        	background-color:#f8f8f8;
        	border-color:#eee;
        	font-weight:600;
        }
        td.fc-widget-header {
        	border-top-width:0;
        	border-color:#eee;
        }
        td.fc-widget-content {
        	border-color:#eee;
        }
        .fc-basic-view .fc-day-number {
        	padding:3px 7px;
        }
        .fc-event {
        	color:#fff !important;
        	background-color:#04a3ff;
        	border-color:#04a3ff;
        	border-radius:2px;
        	font-size:14px;
        	line-height:24px;
        }
        .fc-day-grid-event {
        	margin-left:0;
        	margin-right:0;
        	padding:7px 10px;
        }
        tr:first-child >td >.fc-day-grid-event {
        	margin-top:0;
        }
        .fc-event >.fc-content {
        	display:block;
        	white-space:nowrap;
        	text-overflow:ellipsis;
        	overflow:hidden;
        }
        /* 5.3. CALENDAR EVENTS */.calendar--events .h4 {
        	margin-bottom:20px;
        	font-weight:400;
        	line-height:34px;
        }
        .calendar--events .fc-event {
        	padding:5px 10px 7px;
        	white-space:nowrap;
        	text-overflow:ellipsis;
        	overflow:hidden;
        	cursor:pointer;
        }
        .calendar--events .fc-event + .fc-event {
        	margin-top:5px;
        }
        .calendar--events .form-check {
        	margin-top:28px;
        	color:#222;
        }
        .calendar--events hr {
        	margin-top:28px;
        	margin-bottom:19px;
        }
        .calendar--event__colors {
        	display:-ms-flexbox;
        	display:-webkit-box;
        	display:flex;
        	margin:-4px;
        	padding:0;
        	list-style:none;
        	-ms-flex-wrap:wrap;
        	flex-wrap:wrap;
        }
        .calendar--event__colors li {
        	position:relative;
        	width:30px;
        	height:30px;
        	margin:9px;
        	border-radius:50%;
        	-webkit-transition-property:width,height,margin,border-radius;
        	transition-property:width,height,margin,border-radius;
        	-webkit-transition-duration:.25s;
        	transition-duration:.25s;
        	-webkit-transition-timing-function:linear;
        	transition-timing-function:linear;
        	cursor:pointer;
        	z-index:0;
        }
        .calendar--event__colors li:before {
        	content:" ";
        	position:absolute;
        	top:-5px;
        	left:-5px;
        	right:-5px;
        	bottom:-5px;
        	border:1px solid #e5e5e5;
        	border-radius:2px;
        	-webkit-transition:margin .25s linear,border-color .25s linear;
        	transition:margin .25s linear,border-color .25s linear;
        	z-index:-1;
        }
        .calendar--event__colors li.active {
        	width:40px;
        	height:40px;
        	margin:4px;
        	border-radius:2px;
        }
        .calendar--event__colors li.active:before {
        	margin:4px;
        	border-color:transparent;
        }
        /* 5.15. LABELS */.label {
        	display:inline-block;
        	padding:1px 15px;
        	border-radius:25px;
        	color:#fff;
        	font-size:13px;
        	line-height:23px;
        	font-weight:400;
        	white-space:nowrap;
        	cursor:default;
        }
        .label-default {
        	background-color:#151515;
        }
        .label-primary {
        	background-color:#2bb3c0;
        }
        .label-success {
        	background-color:#009378;
        }
        .label-info {
        	background-color:#5bc0de;
        }
        .label-warning {
        	background-color:#e16123;
        }
        .label-danger {
        	background-color:#ff4040;
        }
        .label-blue {
        	background-color:#2bb3c0;
        }
        .label-orange {
        	background-color:#e16123;
        }
        .label-green {
        	background-color:#009378;
        }
        .label-red {
        	background-color:#ff4040;
        }
        .label-black {
        	background-color:#353535;
        }
        .label-gray {
        	background-color:#ccc;
        }
        /* 5.21. PANEL */.panel {
        	margin-bottom:30px;
        	color:#696969;
        	background-color:#fff;
        	border-radius:5px;
        	box-shadow:0 1px 5px rgba(0,0,0,.08);
        }
        .panel-content {
        	pos.........完整代码请登录后点击上方下载按钮下载查看