首页 > 代码库 > 日历 / 日程表
日历 / 日程表
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lik-fullCalendar</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/lik_fullcalendar.css">
<script src="http://www.mamicode.com/js/jquery-1.8.1.min.js"></script>
<script src="http://www.mamicode.com/js/lik_fullcalendar.js"></script>
</head>
<body>
<div class="lik-fullcalendar" id="lik-fullcalendar">
<div class="lik-date-view">
<div class="date-title"><span class="prev-month"></span> <span class="cur-month"></span> <span
class="next-month"></span> <span class="today-month" style="display: none;">本月</span></div>
<div class="week-box">
<div class="lik-date-item">
<div class="lik-date-item-inner">周日</div>
</div>
<div class="lik-date-item">
<div class="lik-date-item-inner">周一</div>
</div>
<div class="lik-date-item">
<div class="lik-date-item-inner">周二</div>
</div>
<div class="lik-date-item">
<div class="lik-date-item-inner">周三</div>
</div>
<div class="lik-date-item">
<div class="lik-date-item-inner">周四</div>
</div>
<div class="lik-date-item">
<div class="lik-date-item-inner">周五</div>
</div>
<div class="lik-date-item">
<div class="lik-date-item-inner">周六</div>
</div>
</div>
<div class="day-box">
<div class="lik-week-row">
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
</div>
<div class="lik-week-row">
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
</div>
<div class="lik-week-row">
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
</div>
<div class="lik-week-row">
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
</div>
<div class="lik-week-row">
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
</div>
<div class="lik-week-row">
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
</div>
<div class="lik-week-row">
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
<div class="lik-date-item" style="height: 105px;">
<div class="lik-date-item-inner">
<div class="lik-render-con">
<div class="visit-item visit-item-h"><p class="no-visit"></p>
<div class="item-operate"><span>新建</span>
<div class="span-item disabled"> 更多</div>
</div>
</div>
</div>
<span class="day"></span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css部分：
@charset "utf-8";
html {
background: #fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%
}
body {
min-height: 100%
}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
margin: 0;
padding: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block
}
audio, canvas, video {
display: inline-block
}
table {
border-collapse: collapse;
border-spacing: 0
}
fieldset, img {
border: 0
}
iframe {
display: block
}
abbr, acronym {
border: 0;
font-variant: normal
}
del {
text-decoration: line-through
}
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: 500
}
ol, ul {
list-style: none
}
caption, th {
text-align: left
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: 500
}
q:after, q:before {
content: ‘‘
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
a:hover {
text-decoration: underline
}
a, ins {
text-decoration: none
}
.lik-fullcalendar .action-view, .lik-fullcalendar .count-view, .lik-fullcalendar .lik-date-view, .lik-fullcalendar .list-view {
width: 100%;
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
z-index: 1000
}
.lik-fullcalendar .list-view {
display: block !important
}
.lik-fullcalendar .count-view {
border-top: 1px solid #eee
}
.lik-fullcalendar .lik-date-view {
z-index: 1002
}
.lik-fullcalendar .date-view-box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
bottom: 35px
}
.lik-fullcalendar .action-view {
z-index: 1003
}
.lik-fullcalendar .action-view .j-import-in {
display: none
}
.lik-fullcalendar .action-view .action-select-box {
width: 140px
}
.lik-fullcalendar .action-view .action-select-box .g-select-title-wrapper {
height: 26px;
line-height: 26px
}
.lik-fullcalendar .action-view .action-select-box .g-select-title-wrapper i {
top: 9px
}
.lik-fullcalendar .btn-switch-view {
display: inline-block;
line-height: 24px;
padding: 0 15px;
margin-left: 0;
font-size: 13px;
color: #3487e2;
cursor: pointer;
vertical-align: middle
}
.lik-fullcalendar .btn-switch-view:hover {
text-decoration: underline
}
.lik-fullcalendar .count-view {
background-color: #fff
}
.lik-fullcalendar .count-view .map-list-item {
padding: 15px 20px
}
.lik-fullcalendar .count-view .filter-wrap {
padding: 10px 0;
background-color: #f4f6f9;
border-bottom: 1px solid #eee;
overflow: hidden
}
.lik-fullcalendar .count-view .filter-wrap .g-select-title-wrapper {
height: 28px;
line-height: 28px
}
.lik-fullcalendar .count-view .filter-wrap .g-select-title-wrapper i {
top: 9px
}
.lik-fullcalendar .count-view .date-wrap, .lik-fullcalendar .count-view .sort-wrap {
float: left;
width: 150px;
margin-left: 20px
}
.lik-fullcalendar .count-view .tip-wrap {
height: 38px;
line-height: 38px;
color: #999;
border-bottom: 1px solid #eee
}
.lik-fullcalendar .count-view .tip-wrap span {
margin-left: 22px
}
.lik-fullcalendar .count-view .list-wrap {
position: absolute;
left: 0;
right: 0;
top: 90px;
bottom: 0
}
.lik-fullcalendar .lik-date-view .crm-g-loading {
width: 180px;
height: 80px;
background-color: #fff;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #eee;
margin-left: -90px;
position: absolute;
left: 50%;
top: 150px
}
.lik-fullcalendar .visit-item {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0
}
.lik-fullcalendar .visit-item ul {
width: 100%;
position: absolute;
bottom: 4px;
left: 0
}
.lik-fullcalendar .visit-item li {
line-height: 22px;
position: relative;
padding: 0 45px 0 10px
}
.lik-fullcalendar .visit-item .name {
display: block;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-height: 22px;
color: #666
}
.lik-fullcalendar .visit-item .status {
width: 20px;
height: 22px;
overflow: hidden;
position: absolute;
right: 4px;
top: 0;
font-size: 12px;
/*background: url(../images/ico-visit-2438abb697.png) no-repeat;*/
text-indent: -999em
}
.lik-fullcalendar .visit-item .status-0 {
background-position: 0 2px
}
.lik-fullcalendar .visit-item .status-1 {
background-position: -20px 3px
}
.lik-fullcalendar .visit-item .status-2 {
background-position: -40px 3px
}
.lik-fullcalendar .visit-item .no-visit {
position: absolute;
top: 50%;
width: 100%;
margin-top: -9px;
font-size: 12px;
text-align: center;
color: #ddd
}
.lik-fullcalendar .visit-item .item-operate {
display: none;
width: 100%;
border-top: 1px dashed #eee;
line-height: 30px;
position: absolute;
bottom: -31px;
text-align: center
}
.lik-fullcalendar .visit-item .item-operate .span-item, .lik-fullcalendar .visit-item .item-operate span {
display: inline-block;
width: 30%;
text-align: center;
color: #3487e2;
cursor: pointer;
font-size: 14px;
}
.lik-fullcalendar .visit-item .item-operate .span-item:hover, .lik-fullcalendar .visit-item .item-operate span:hover {
text-decoration: underline
}
.lik-fullcalendar .visit-item .item-operate .span-item:hover .more-item, .lik-fullcalendar .visit-item .item-operate span:hover .more-item {
display: block
}
.lik-fullcalendar .visit-item .item-operate .span-item.disabled, .lik-fullcalendar .visit-item .item-operate span.disabled {
cursor: default;
color: #ccc;
text-decoration: none
}
.lik-fullcalendar .visit-item .item-operate .more-item {
display: none;
width: 130px;
padding: 5px 0;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
background-color: #fff;
position: absolute;
right: 0;
top: 30px
}
.lik-fullcalendar .visit-item .item-operate .more-item span {
width: 100px;
display: block;
padding: 0 15px;
height: 36px;
line-height: 36px;
text-align: left;
color: #666;
text-decoration: none
}
.lik-fullcalendar .visit-item .item-operate .more-item span:hover {
background-color: #f2f2f2
}
.lik-fullcalendar .visit-item .name {
cursor: pointer;
font-size: 14px;
}
.lik-fullcalendar .visit-item .name:hover {
text-decoration: underline
}
.lik-fullcalendar .visit-item-h:hover {
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
bottom: -31px;
background-color: #fff;
z-index: 100
}
.lik-fullcalendar .visit-item-h:hover .no-visit {
margin-top: -24px
}
.lik-fullcalendar .visit-item-h:hover ul {
bottom: 35px
}
.lik-fullcalendar .visit-item-h:hover .item-operate {
display: block;
bottom: 0
}
.lik-fullcalendar .visit-item-h:hover .name {
color: #3487e2
}
.lik-fullcalendar .emp-select-box {
padding: 0 8px;
border: 1px solid #eee;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
height: 26px;
line-height: 26px;
position: relative;
color: #fff
}
.lik-fullcalendar .emp-select-box.disabled {
color: #ccc;
background-color: #f0f0f0;
cursor: default
}
.lik-fullcalendar .emp-select-box.disabled:after, .lik-fullcalendar .emp-select-box.disabled:before {
display: none
}
.lik-fullcalendar .emp-select-box .c-name {
position: relative;
display: inline-block;
background: #3d83e9;
height: 22px;
margin-top: 2px;
-webkit-border-radius: 60px;
border-radius: 60px;
line-height: 22px;
padding: 0 25px 0 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #fff;
max-width: 116px
}
.lik-fullcalendar .emp-select-box .c-name span {
position: absolute;
right: 10px
}
.lik-fullcalendar .count-view .map-l, .lik-fullcalendar .map-view .map-l {
width: 359px;
height: 100%;
border-right: 1px solid #eee;
position: relative
}
.lik-fullcalendar .count-view .scroll-el, .lik-fullcalendar .map-view .scroll-el {
width: 100%;
height: 100%
}
.lik-fullcalendar .count-view .map-r, .lik-fullcalendar .map-view .map-r {
position: absolute;
left: 360px;
bottom: 0;
right: 0;
top: 0;
background: url(../images/sec-ld-1e2eb05443.gif) 50% no-repeat
}
.lik-fullcalendar .count-view .map-r .crm-c-map-overlay, .lik-fullcalendar .map-view .map-r .crm-c-map-overlay {
position: relative;
width: 100%;
height: 100%;
background-color: #fff
}
.lik-fullcalendar .count-view .map-r .map-close, .lik-fullcalendar .map-view .map-r .map-close {
display: none
}
.lik-fullcalendar .count-view .map-r .map-wraper, .lik-fullcalendar .map-view .map-r .map-wraper {
position: static;
width: 100%;
height: 100%
}
.lik-fullcalendar .map-list-item {
padding: 15px 20px 15px 55px;
border-bottom: 1px solid #eee;
cursor: pointer;
color: #999;
line-height: 20px;
position: relative
}
.lik-fullcalendar .map-list-item.cur, .lik-fullcalendar .map-list-item:hover {
background-color: #fafafa
}
.lik-fullcalendar .map-list-item h5 {
padding-bottom: 5px;
padding-right: 70px
}
.lik-fullcalendar .map-list-item .pos, .lik-fullcalendar .map-list-item .tip-pointer {
width: 24px;
height: 29px;
line-height: 27px;
text-align: center;
color: #fff;
font-size: 12px;
position: absolute;
left: 10px;
top: 12px;
background: url(../images/icon-map-dfb00c20f1.png?5.5) no-repeat;
font-family: helvetica
}
.lik-fullcalendar .map-list-item .tip-status-1 {
background-position: -48px 0
}
.lik-fullcalendar .map-list-item .tip-status-0 {
background-position: -24px 0
}
.lik-fullcalendar .map-list-item .drag-btn {
position: absolute;
right: 15px;
top: 40px
}
.lik-fullcalendar .map-list-item.dragging {
background-color: #eee;
opacity: .6
}
.lik-fullcalendar .no-map-data {
font-size: 20px;
text-align: center;
color: #999;
padding-top: 150px
}
.lik-fullcalendar .change-geo {
position: absolute;
right: 22px;
top: 15px
}
.lik-fullcalendar .show-pos {
padding: 6px 5px 0 0
}
.lik-fullcalendar .define-date-wrap {
border: 1px solid #ddd;
margin-top: 10px;
-webkit-border-radius: 3px;
border-radius: 3px;
overflow: hidden
}
.lik-fullcalendar .define-date-wrap .line {
float: left;
width: 15px;
height: 1px;
margin: 15px 10px;
background-color: #ddd;
overflow: hidden
}
.lik-fullcalendar .define-date-wrap .end-time, .lik-fullcalendar .define-date-wrap .start-time {
width: 150px;
float: left
}
.lik-fullcalendar .define-date-wrap .end-time .f-g-datepicker-input-wrapper input, .lik-fullcalendar .define-date-wrap .start-time .f-g-datepicker-input-wrapper input {
width: 140px
}
.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper {
display: block;
width: 100%
}
.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .date-wrapper, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .date-wrapper {
width: 150px;
padding: 0;
z-index: 22
}
.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .date-wrapper input, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .date-wrapper input {
background-color: transparent
}
.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .time-wrapper, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .time-wrapper {
width: 60px;
z-index: 20
}
.lik-fullcalendar .define-date-wrap .end-time .f-g-date-time-value-wrapper .time-wrapper input, .lik-fullcalendar .define-date-wrap .start-time .f-g-date-time-value-wrapper .time-wrapper input {
width: 60px;
padding: 0;
border: none
}
.lik-fullcalendar .define-date-wrap .end-time .f-g-datepicker-input, .lik-fullcalendar .define-date-wrap .start-time .f-g-datepicker-input {
border: none
}
.lik-fullcalendar .day-view {
position: relative
}
.lik-fullcalendar .day-view .date-title {
font-size: 20px;
border: none;
margin-top: -10px;
margin-bottom: 15px;
color: #666;
position: relative
}
.lik-fullcalendar .day-view .today-btn {
position: absolute;
left: 0;
font-size: 13px;
color: #3487e2;
cursor: pointer
}
.lik-fullcalendar .day-view .today-btn:hover {
text-decoration: underline
}
.lik-fullcalendar .day-view .btns-box {
position: absolute;
right: 0;
top: -2px
}
.lik-fullcalendar .day-view .btns-box span {
padding: 0 8px;
font-size: 13px;
margin-left: 15px
}
.lik-fullcalendar .day-view .batch-term {
padding: 0 20px 10px
}
.lik-fullcalendar .day-view .dt-tatal-tip {
min-height: 48px
}
.lik-fullcalendar .day-view .dt-tatal-tip .tatal-tip {
bottom: 15px
}
.lik-fullcalendar .day-view .drag-btn {
display: none;
margin-left: 10px;
width: 20px;
height: 20px;
overflow: hidden;
cursor: move;
/*background: url(../images/ico-visit-2438abb697.png) -60px 0 no-repeat*/
}
.lik-fullcalendar .day-view tr {
position: relative
}
.lik-fullcalendar .day-view tr.dragging {
background-color: #eee;
opacity: .6;
height: 48px;
line-height: 48px
}
.lik-fullcalendar .day-view tr.dragging td {
padding: 0 10px
}
.lik-fullcalendar .day-list-view {
border: 1px solid #eee;
height: 430px;
position: relative;
z-index: 1
}
.lik-fullcalendar .map-view {
background: #fff;
position: absolute;
left: 1px;
top: 113px;
bottom: 1px;
right: 1px;
z-index: 2
}
.lik-fullcalendar .date-scroll {
width: 100%;
height: 100%
}
.lik-fullcalendar .pannel-box {
position: absolute;
left: 0;
top: 71px;
bottom: 0;
right: 0
}
.lik-fullcalendar .date-title {
width: 100%;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
line-height: 48px;
font-size: 16px;
text-align: center;
position: relative
}
.lik-fullcalendar .date-title span {
display: inline-block
}
.lik-fullcalendar .date-title .today-month {
position: absolute;
left: 24px;
top: 0;
cursor: pointer;
color: #3487e2;
font-size: 13px
}
.lik-fullcalendar .date-title .today-month:hover {
text-decoration: underline
}
.lik-fullcalendar .next-month, .lik-fullcalendar .prev-month {
display: inline-block;
margin: 0 5px;
width: 25px;
height: 25px;
vertical-align: middle;
overflow: hidden;
cursor: pointer;
position: relative
}
.lik-fullcalendar .next-month:after, .lik-fullcalendar .next-month:before, .lik-fullcalendar .prev-month:after, .lik-fullcalendar .prev-month:before {
content: ‘ ‘;
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 5px;
overflow: hidden;
border: 6px solid transparent;
border-right-color: #3487e2
}
.lik-fullcalendar .prev-month:after {
border-right-color: #fff;
left: 2px
}
.lik-fullcalendar .next-month:after, .lik-fullcalendar .next-month:before {
left: 8px;
border-left-color: #3487e2;
border-right-color: transparent
}
.lik-fullcalendar .next-month:after {
border-left-color: #fff;
left: 6px
}
.lik-fullcalendar .week-box {
width: 100%;
overflow: hidden
}
.lik-fullcalendar .lik-render-con {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0
}
.lik-fullcalendar .week-box .lik-date-item {
height: 21px
}
.lik-fullcalendar .week-box .lik-date-item-inner {
line-height: 20px;
color: #999;
font-size: 12px;
text-align: center;
min-height: 20px
}
.lik-fullcalendar .lik-date-item {
float: left;
width: 14.285%;
position: relative
}
.lik-fullcalendar .lik-date-item-inner {
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
position: absolute;
top: 0;
right: 0;
bottom: 0;
bottom: 1px;
left: 1px
}
.lik-fullcalendar .lik-date-item-inner .day {
font-size: 12px;
position: absolute;
right: 10px;
top: 10px;
z-index: 200;
color: #666;
font-family: Arial
}
.lik-fullcalendar .lik-next-month-day .day, .lik-fullcalendar .lik-prev-month-day .day {
color: #ccc
}
.lik-fullcalendar .lik-cur-month-today .day {
color: #fff;
width: 30px;
height: 18px;
line-height: 18px;
text-align: center;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #3487e2
}
js部分：
/**
* Created by Lik.
*/
$(function () {
//get Object of Date
var oDate = new Date();
const onlyLikDate = new Date();
//currentOnly year-month-date
const currentOnlyYearMonthDate = onlyLikDate.getFullYear() + ‘-‘ + (onlyLikDate.getMonth()+1) + ‘-‘ + onlyLikDate.getDate();
console.log(currentOnlyYearMonthDate);
//get current year
var currentYear = oDate.getFullYear();
//get current month
var currentMonth = oDate.getMonth();
//get the day of the first day in current month and the totals of current month
function getCurrentMonthDays(curYear, curMon) {
console.log(curYear, curMon);
var date = new Date();
date.setFullYear(curYear);
date.setMonth(curMon);
date.setDate(1);
var weekday = new Array(7);
weekday[0] = ‘星期日‘;
weekday[1] = ‘星期一‘;
weekday[2] = ‘星期二‘;
weekday[3] = ‘星期三‘;
weekday[4] = ‘星期四‘;
weekday[5] = ‘星期五‘;
weekday[6] = ‘星期六‘;
var lastDate = new Date(curYear, curMon + 1, 0);
var firstDay = date.getDay();
var daysLength = lastDate.getDate();
console.log(firstDay, daysLength);
//console.log("本月第一天是 " + weekday[date.getDay()] + ‘ 本月最后一天是 ‘ + lastDate.getDate());
console.log($(‘#lik-fullcalendar .day-box .lik-date-item‘).length);
//clear class and day content
var likDateLen = $(‘#lik-fullcalendar .day-box .lik-date-item‘).length
for(var i=0;i<likDateLen;i++){
$(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).css(‘zIndex‘, likDateLen-i).removeClass(‘lik-prev-month-day‘).removeClass(‘lik-cur-month-day‘).removeClass(‘lik-next-month-day‘).find(‘span.day‘).html(‘‘);
$(‘span.day‘).eq(i).html(‘‘);
}
//add class ‘lik-prev-month-day‘ for previous month
for(var i=0;i<firstDay;i++){
$(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).addClass(‘lik-prev-month-day‘);
}
//get prev month totals
var prevMonthTotals = (new Date(curYear, curMon, 0)).getDate();
var prevMonthLose = $(‘#lik-fullcalendar .day-box .lik-prev-month-day‘).length;
for(var i=0;i<prevMonthLose;i++){
$(‘#lik-fullcalendar .day-box .lik-prev-month-day‘).eq(i).find(‘span.day‘).html(prevMonthTotals+i-prevMonthLose+1);
}
//add class ‘lik-cur-month-day‘ for current month
for(var i=firstDay;i<daysLength+firstDay;i++){
$(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).addClass(‘lik-cur-month-day‘).attr(‘lik-data-date‘, curYear+‘-‘+(curMon+1)+‘-‘+(i+1-firstDay));
}
//current date light
$.each($(‘.lik-date-item‘), function (i, v) {
$(‘.lik-date-item‘).eq(i).removeClass(‘lik-cur-month-today‘);
if ($(‘.lik-date-item‘).eq(i).attr(‘lik-data-date‘) == currentOnlyYearMonthDate) {
$(‘.lik-date-item‘).eq(i).addClass(‘lik-cur-month-today‘);
}
});
//add class ‘lik-next-month-day‘ for next month
for(var i=daysLength+firstDay;i<$(‘#lik-fullcalendar .day-box .lik-date-item‘).length;i++){
$(‘#lik-fullcalendar .day-box .lik-date-item‘).eq(i).addClass(‘lik-next-month-day‘);
}
var nextMonthLose = $(‘#lik-fullcalendar .day-box .lik-next-month-day‘).length;
for(var i=0;i<nextMonthLose;i++){
$(‘#lik-fullcalendar .day-box .lik-next-month-day‘).eq(i).find(‘span.day‘).html(i + 1);
}
//add dates for current month
for(var i=0;i<$(‘#lik-fullcalendar .day-box .lik-cur-month-day‘).length;i++){
$(‘#lik-fullcalendar .day-box .lik-cur-month-day‘).eq(i).find(‘span.day‘).html(i + 1);
}
//lik-week-row show/unshow
$.each($(‘#lik-fullcalendar .lik-week-row‘), function(i, v){
if(!$(‘#lik-fullcalendar .lik-week-row‘).eq(i).find(‘.lik-date-item‘).hasClass(‘lik-cur-month-day‘)){
$(‘#lik-fullcalendar .lik-week-row‘).eq(i).css(‘display‘, ‘none‘);
}else{
$(‘#lik-fullcalendar .lik-week-row‘).eq(i).css(‘display‘, ‘block‘);
}
})
}
//current month show / unshow
function likCurrentMonthShow(curYear, curMonth) {
if (curYear == onlyLikDate.getFullYear() && curMonth == onlyLikDate.getMonth()) {
$(‘#lik-fullcalendar .today-month‘).css(‘display‘, ‘none‘);
} else {
$(‘#lik-fullcalendar .today-month‘).css(‘display‘, ‘block‘);
}
}
getCurrentMonthDays(currentYear, currentMonth);
$(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
//prev month
$(‘#lik-fullcalendar .prev-month‘).on(‘click‘, function () {
if (currentMonth == 0) {
currentMonth = 11;
currentYear -= 1;
oDate.setFullYear(currentYear);
$(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
} else {
currentMonth--;
oDate.setMonth(currentMonth);
$(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
}
likCurrentMonthShow(currentYear, currentMonth);
getCurrentMonthDays(currentYear, currentMonth);
});
//next month
$(‘#lik-fullcalendar .next-month‘).on(‘click‘, function () {
if (currentMonth >= 11) {
currentMonth = 0;
currentYear += 1;
oDate.setFullYear(currentYear);
$(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
} else {
currentMonth++;
oDate.setMonth(currentMonth);
$(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
}
likCurrentMonthShow(currentYear, currentMonth);
getCurrentMonthDays(currentYear, currentMonth);
});
//go back to current month
$(‘#lik-fullcalendar .today-month‘).on(‘click‘, function () {
//get current year
currentYear = onlyLikDate.getFullYear();
//get current month
currentMonth = onlyLikDate.getMonth();
console.log(currentYear, currentMonth);
$(‘#lik-fullcalendar .cur-month‘).html(currentYear + ‘年‘ + (currentMonth + 1) + ‘月‘);
likCurrentMonthShow(currentYear, currentMonth);
getCurrentMonthDays(currentYear, currentMonth);
})
});
实际效果可先查看以下网址：
http://www.91lik.win/lik-fullcalendar/index.html
日历 / 日程表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。