<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历日程表联动</title>
<link rel="stylesheet" href="tui.calendar/tui-calendar.css">
<link rel="stylesheet" href="tui.calendar/tui-date-picker.css">
<link rel="stylesheet" href="tui.calendar/tui-time-picker.css">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="moment.js"></script>
<script src="layui/layui.all.js"></script>
<script src="tui.calendar/tui-code-snippet.min.js"></script>
<script src="tui.calendar/tui-date-picker.min.js"></script>
<script src="tui.calendar/tui-time-picker.min.js"></script>
<script src="tui.calendar/tui-calendar.js"></script>
</head>
<body>
<style>
* {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
html {font: normal 14px "Microsoft YaHei";-webkit-text-size-adjust: 100%;}
body {padding: 0;margin: 0 auto;font-size: 14px; color: #333;background-color: #fff;font-family: "Arial","Microsoft YaHei";min-width: 320px;
-webkit-text-size-adjust: none;
/*取出点击出现半透明的灰色背景*/
-webkit-tap-highlight: rgba(0,0,0,0);
/*控制内容的可选择性*/
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {-webkit-appearance: none;}
ul,
li,
form,
dl,
dt,
dd,
div,
ol,
figure,
aside{padding: 0;margin: 0;}
.ul,
.ul li {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;table-layout: fixed;}
table td {border-collapse: collapse;font-size: 1px;}
select, input, textarea {font-size: 14px;color: #333;border-radius: 0;-webkit-border-radius: 0;font-family: "Microsoft YaHei";}
img{border: none;max-width: 100%;vertical-align: middle;}
a {color: #333;text-decoration: none; -webkit-tap-highlight-color:rgba(0,0,0,0);/* 去掉链接触摸高亮 */}
a:hover {color: #0091ff;text-decoration: none;}
a:focus {color: #333;outline: none;-moz-outline: none;}
a:active {color: #333;}
pre{
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
margin:0;
font-family: "Microsoft YaHei";
text-align:justify;
text-justify:inter-ideograph;
}
img, object {
border: none;
max-width: 100%;
border: 0;
overflow: hidden;
vertical-align: middle;
}
.clear {clear: both;height: 0px;overflow: hidden;zoom: 0;}
.clearfix {*zoom:1;}/*IE/7/6*/
.clearfix:after { content:"\200B"; display:block; height:0; clear:both; }
.dot{display: block;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;}
/*2行文本省略号*/
.dot2 {display: -webkit-box;display: box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
/*3行文本省略号*/
.dot3 {display: -webkit-box;display: box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
.ytable{ display:table; width:100%;table-layout: fixed;}
.ytable-cell{ display:table-cell; vertical-align:middle;}
.bg_cover{background-size: cover;background-position: center center;background-repeat: no-repeat;}
.bg_contain{background-size: contain;background-position: center center;background-repeat: no-repeat;}
a {
color: #585858;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 去掉链接触摸高亮 */
a:focus {
outline: none;
-moz-outline: none;
}
.container{max-width: 1200px;margin: auto}
.schedule-detail{
background: #fff;
clear: both;
}
.schedule-left{
width: 304px;
float: left;
border-right: 1px solid #ddd;
padding: 15px;
}
.schedule-left .layui-laydate{
box-shadow: none;
}
.schedule-left .laydate-theme-molv .layui-laydate-content{
border: none;
}
.schedule-right{
margin-left: 304px;
padding: 15px 0;
}
.schedule-right-header{
line-height: 45px;
padding: 0 15px;
}
.schedule-right-header::after{
content:"";
display: block;
clear: right;
}
.schedule-right-tab{
float: right;
}
.schedule-right-tab .schedule-tab-item{
background: #f2f2f2;
color: #333;
padding: 0 20px;
cursor: pointer;
float: left;
}
.schedule-right-tab .schedule-tab-item:hover,
.schedule-right-tab .schedule-tab-item.active{
background: #309bb6;
color: #fff;
}
.schedule-day-header{
border-bottom: 1px solid #ddd;
padding: 10px 0;
display: none;
}
.schedule-day-header span{
display: inline-block;
vertical-align: bottom;
/*margin-right: 10px;*/
}
.schedule-day-header .time-type{
color: #999;
width: 80px;
text-align: center;
}
.schedule-day-content{
}
.schedule-day-item{
position: relative;
height: 50px;
padding-left: 80px;
}
.schedule-day-item .time{
position: absolute;
display: inline-block;
width: 80px;
bottom: 100%;
left: 0;
text-align: center;
transform: translateY(50%);
}
.schedule-day-item .content{
height: 100%;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
position: relative;
box-sizing: content-box;
}
.schedule-day-info{
position: absolute;
width: 100%;
box-shadow: 0 0 5px 1px #ccc;
background: #fff;
padding: 5px;
z-index: 5;
border-left: 2px solid #309bb6;
}
.schedule-right-arrow{
display: inline-block;
}
.schedule-right-arrow .schedule-time-info{
margin-right: 20px;
}
.schedule-right-arrow .schedule-prev,
.schedule-right-arrow .schedule-next{
border-radius: 50%;
border: 1px solid #ccc;
height: 34px;
width: 34px;
margin: 8px 0;
vertical-align: middle;
color: transparent;
overflow: hidden;
position: relative;
background: transparent;
}
.schedule-right-arrow .schedule-prev:after,
.schedule-right-arrow .schedule-next:after{
content:"";
display: block;
width: 10px;
height: 10px;
border-left: 2px solid #ccc;
border-bottom:2px solid #ccc;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.schedule-right-arrow .schedule-prev:after{
right: -2.5px;
transform: rotate(45deg);
}
.schedule-right-arrow .schedule-next:after{
left: -2.5px;
transform: rotate(-135deg);
}
.schedule-right-arrow .schedule-prev:hover,
.schedule-right-arrow .schedule-next:hover{
background: #309bb6;
border-color: #309bb6;
}
.schedule-right-arrow .schedule-prev:hover::after,
.schedule-right-arrow .schedule-next:hover::after{
border-color: #fff;
}
</style>
<div class="container schedule-detail">
<div class="schedule-left">
<div id="left-schedule-calendar"></div>
</div>
<div class="schedule-right">
日历日程表联动layui&tui.calendar （131个子文件） 
layui.css 87KB tui-calendar.css 34KB tui-date-picker.css 20KB layer.css 14KB tui-time-picker.css 11KB layui.mobile.css 10KB laydate.css 8KB laydate.css 7KB code.css 1KB iconfont.eot 46KB iconfont.eot 2KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 0.gif 3KB 48.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB 58.gif 2KB 6.gif 2KB 54.gif 2KB 53.gif 2KB 56.gif 2KB 62.gif 2KB 31.gif 2KB 55.gif 2KB 35.gif 2KB 15.gif 2KB loading-2.gif 2KB 37.gif 1KB 68.gif 1KB 52.gif 777B loading-1.gif 701B .gitignore 103B
日历日程表联动.html 20KB calendar.iml 469B tui-calendar.js 1.13MB layui.all.js 404KB moment.js 147KB jquery.js 95KB jquery-3.3.1.min.js 85KB tui-date-picker.min.js 52KB table.js 31KB mobile.js 31KB tui-time-picker.min.js 28KB laydate.js 27KB laydate.js 27KB共 131 条
- 1
- 2
我人麻了啊
- 粉丝: 8
最新资源
- 电网企业大数据的价值实现探析.docx
- 基本台账-安全生产网络组织台帐.doc
- 扩频通信抗干扰系统分析大学本科方案设计书.doc
- 机械设计制造及其自动化-外文翻译-外文文献-英文文献-液压支架的最优化设计.doc
- 油气勘探项目管理的探讨.docx
- 智能家居中家庭总体布线实战技术解析.docx
- 数字图像处理锐化技术的原理与实现.docx
- 计算机软件的安全检测技术分析.docx
- 51单片机的多路温度采集控制系统方案设计书.doc
- 上海XX有限公司网络安全解决方案.ppt
- 基于网络经济时代下市场营销策略的转变.docx
- 从全球视角看中国移动互联网产业发展现状及地位.docx
- 最新家庭医疗网络救护医疗保健ppt模板.pptx
- 《电气控制与PLC应用》课程整体设计措施.doc
- 国内外工程项目管理现状比较与探讨80801.doc
- 第一章旅游网站基于营销优化的内容建设.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0