<!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个文件
gif:75个
js:29个
css:9个
需积分: 50 19 下载量 93 浏览量
2022-03-11
15:26:16
上传
评论
收藏 933KB RAR 举报
温馨提示
layui 和 tui.calendar 资源, 内含layui日历联动tui.calendar日程表(日、周、月)实例 相关文档: https://nhn.github.io/tui.calendar/latest/Calendar#setCalendars http://layui.itmtr.cn/doc/modules/laydate.html#use http://momentjs.cn/docs/
资源详情
资源评论
资源推荐
收起资源包目录
日历日程表联动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
我人麻了啊
- 粉丝: 6
- 资源: 11
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于matlab开发的全面详解LTE:MATLAB建模、仿真与实现-simulink.rar
- 自动驾驶定位系列教程二:系统架构.pdf
- 整站程序8优技巧网-8ujq.rar
- 世界各个国家或地区国际域名缩写
- 基于matlab开发的根据rvm回归模型自己编的matlab程序.rar
- 基于matlab开发的该程序为国内一所大学编写的LTE链路层仿真程序,根据LTE标准协议编写的,很容易看懂.rar
- 高效C++学生成绩管理系统:教育技术+C++17编程+数据管理+教务自动化
- 搜索链接要广告分类系统 v2.0-yad20.rar
- 基于matlab开发的Tipping的相关向量机RVM的回归MATLAB程序,有英文注释,可以运行.rar
- 一个点击正反转程序实例,可实现案件电机正反转
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0