box sizinglayui⽇历和tui.calendar⽇程表联动
效果演⽰
引⽤的layui.all.js有所改动，所以需另外下载
页⾯源码：
<!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;
-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:015px;
}
.
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:020px;
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;*/
/*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:005px 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;
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">
<div class="schedule-right-header">
<div class="schedule-right-arrow">
<span class="schedule-time-info"></span>
<button class="schedule-prev">上⼀页</button>
<button class="schedule-next">xiayixie</button>
</div>
<div class="schedule-right-tab">
<span class="schedule-tab-item" date-type="today" >今天</span> <span class="schedule-tab-item schedule-type-btn" date-type="day">⽇</span>
<span class="schedule-tab-item schedule-type-btn" date-type="week">周</span>
<span class="schedule-tab-item schedule-type-btn active" date-type="month">⽉</span>
</div>
</div>
<div class="schedule-right-content" data-type="day">
<div class="schedule-day-header">
<span class="time-type">GMT+08</span>
<span class="time-info">
3⽉8⽇，周⼆<br>
⼆⽉初六
</span>
</div>
<div class="schedule-day-content">
<div id="calendar"></div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。