原文：https://blog.csdn.net/chyanwu68/article/details/90372215
引言
最新工作中需要實現日程管理功能，由於技術選型（基於layui）限制，從網上對比查詢最終選定使用FullCalendar插件來實現日程管理。
其中對比的日程還有XgCalendar、Google Calendar
實現效果
1、打開界面后，月視圖
2、切換到周視圖
3、切換到日視圖
4、在月視圖，添加會議室預訂
5、在月視圖，修改會議室預訂
6、在月視圖，鼠標移到event，顯示詳情
對應實現
1、依賴的js
下載路徑：https://fullcalendar.io/docs/getting-started
2、對應的index
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href='/fullcalendar/core/main.css' rel='stylesheet' />
<link rel="stylesheet" href='/fullcalendar/daygrid/main.css' rel='stylesheet' />
<link rel="stylesheet" href='/fullcalendar/timegrid/main.css' rel='stylesheet' />
<link rel="stylesheet" href="/assets/libs/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/assets/common.css" media="all">
<style>
#calendar {
max-width: 1200px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 span {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
/*日期控件*/
.layui-laydate-content>.layui-laydate-list {
padding-bottom: 0px;
overflow: hidden;
}
.layui-laydate-content>.layui-laydate-list>li{
width:50%
}
/* pop */
.popper,
.tooltip {
position: absolute;
z-index: 9999;
background: #FFC107;
color: black;
width: 150px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px;
text-align: center;
}
.style5 .tooltip {
background: #1E252B;
color: #FFFFFF;
max-width: 200px;
width: auto;
font-size: .8rem;
padding: .5em 1em;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}
.tooltip .tooltip-arrow,
.popper .popper__arrow {
border-color: #FFC107;
}
.style5 .tooltip .tooltip-arrow {
border-color: #1E252B;
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-card" style="padding-top: 5px; margin-bottom: 8px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-xs12 layui-col-md2">
<div id='external-events'>
<h4>會議室</h4>
<#list roomList as room>
<div class="external-event" id="room${room.id}" roomId="${room.id}" onclick="changeRoom(this.id)">${room.name}</div>
</#list>
<#--<div id="1" roomId="1" onclick="changeRoom(this.id)">會議室1</div>-->
<#--<div id="2" roomId="2" onclick="changeRoom(this.id)">會議室2</div>-->
<#--<div id="3" roomId="3" onclick="changeRoom(this.id)">會議室3</div>-->
<#--<div id="4" roomId="4" onclick="changeRoom(this.id)">會議室4</div>-->
</div>
</div>
<div class="layui-col-xs12 layui-col-md10">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
<!-- 表單彈框 -->
<script type="text/html" id="calendarForm">
<form lay-filter="calendarForm" class="layui-form model-form">
<input name="id" id="id" type="hidden"/>
<div class="layui-form-item">
<label class="layui-form-label">預約主題</label>
<div class="layui-input-block">
<input name="appointTheme" placeholder="請輸入會議主題" type="text" class="layui-input" maxlength="50" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">預約開始時間</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="stime" name="stime" placeholder="HH:mm" lay-verify="required" required>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">預約結束時間</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="etime" name="etime" placeholder="HH:mm" lay-verify="required" required>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">預約人</label>
<div class="layui-input-block">
<input name="appointPerson" value="<#if currentUser.name!=''>${currentUser.name}<#else>${currentUser.loginName}</#if>" type="text" class="layui-input" maxlength="50" readonly />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">聯系方式</label>
<div class="layui-input-block">
<input name="tel" value="<#if currentUser.phone??>${currentUser.phone}</#if>" type="text" class="layui-input" maxlength="20" readonly />
</div>
</div>
<div class="layui-form-item text-right">
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
<button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
<button class="layui-btn" type="button" id="delEdit" onclick="del()">刪除</button>
</div>
</form>
</script>
<!-- js部分 -->
<script src='/fullcalendar/core/main.js'></script>
<script src='/fullcalendar/core/locales-all.js'></script>
<script src='/fullcalendar/daygrid/main.js'></script>
<script src='/fullcalendar/interaction/main.js'></script>
<script src='/fullcalendar/timegrid/main.js'></script>
<script src='/fullcalendar/core/locales/zh-cn.js'></script>
<script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script src='/fullcalendar/popper.min.js'></script>
<script src='/fullcalendar/tooltip.min.js'></script>
<script type="text/javascript" src="/assets/libs/layui/layui.all.js"></script>
<script type="text/javascript" src="/assets/js/calendar/index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
3、對應的js
var addIndex;
var roomId;
var calendar;
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var laydate = layui.laydate;
roomId = $("#room1").attr("roomId");
$("#room1").css("backgroundColor", "#003399");
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
// defaultDate: '2019-05-07',
selectable: true, // dataClick生效
locale: 'zh-cn', // 設置中文
eventLimit: 4, // 顯示更多
displayEventEnd: true, // 顯示結束時間
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: function(info, successCallback, failureCallback) {
$.get("/erpcalendartask/getByParams", {roomId: roomId, sTime: info.start.valueOf(), eTime: info.end.valueOf()}, function (res) {
if(res.code == 200) {
successCallback(res.data);
}else {
failureCallback(res.errStr);
}
});
}
,eventClick: function(info) {
console.log('eventClick ' + info);
openEditLayer(info);
}
,dateClick: function(info) {
console.log('dateClick ' + info.dateStr);
openLayer(info);
}
,eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: popContent(info.event.title, info.event.extendedProps.appointPerson, info.event.start, info.event.end, info.event.extendedProps.tel),
placement: 'top',
trigger: 'hover',
container: 'body',
html: true
});
}
});
calendar.render();
});
function popContent(title, appointPerson, stime, etime, tel) {
var sDate =new Date(stime);
var s = sDate.getHours() + '點' + sDate.getMinutes() + '分';
var eDate =new Date(etime);
var e = eDate.getHours() + '點' + eDate.getMinutes() + '分';
var str = '<div style="font-weight: bold;">' + title + '</div>';
str += '<div style="height: 1px;background-color: black;"></div>'
str += '<div style="text-align: left;">預訂人：' + appointPerson + '</div>';
str += '<div style="text-align: left;">預訂時間：' + s + ' - ' + e + '</div>';
str += '<div style="text-align: left;">預訂電話：' + tel + '</div>'
return str;
}
$(document).ready(function () {
});
function initDateCtrl() {
//日期時間選擇器
laydate.render({
elem: '#stime' //指定元素
,type: 'time'
,format: 'HH:mm'
,done: function(value, date){
var etime = $("#etime").val();
var ehour = parseInt(etime.split(":")[0]);
var eminute = parseInt(etime.split(":")[1]);
var hour = date.hours;
var minute = date.minutes;
if(ehour < hour) {
$("#finishtime").val(value);
} else {
if(eminute < minute) {
$("#etime").val(value);
}
}
}
});
//日期時間選擇器
laydate.render({
elem: '#etime' //指定元素
,type: 'time'
,format: 'HH:mm'
,done: function(value, date){
var stime = $("#stime").val();
var shour = parseInt(stime.split(":")[0]);
var sminute = parseInt(stime.split(":")[1]);
var hour = date.hours;
var minute = date.minutes;
if(shour > hour) {
$("#stime").val(value);
} else {
if(sminute > minute) {
$("#stime").val(value);
}
}
}
});
}
function openEditLayer(info){
addIndex=layer.open({
title : '<i class="fa fa-plus"></i> 編輯日程',
type : 1,
fix : false,
skin : 'layui-layer-rim',
// 加上邊框
area : [ '470px', '450px' ],
// 寬高
content : $('#calendarForm').html(),
success: function (layero, index) {
initDateCtrl();
$("#delEdit").show();
var data = {};
data.id = info.event.id;
var sDate =new Date(info.event.start);
data.stime = sDate.getHours() + ':' + sDate.getMinutes() ;
var eDate =new Date(info.event.end);
data.etime = eDate.getHours() + ':' + eDate.getMinutes() ;
data.appointTheme = info.event.title;
data.appointPerson = info.event.extendedProps.appointPerson;
data.tel = info.event.extendedProps.tel;
form.val('calendarForm', data);
// 表單提交事件
form.on('submit(formSubmit)', function (d) {
var dataStr = sDate.getFullYear() + '-' + (sDate.getMonth() + 1) + '-' + sDate.getDate();
d.field.roomId = roomId;
d.field.stime = dataStr + " " + d.field.stime + ":00";
d.field.etime = dataStr + " " + d.field.etime + ":00";
$.ajax({
type: 'POST',
url: '/erpcalendartask/update',//發送請求
contentType: "application/json; charset=utf-8",
async: true,
data: JSON.stringify(d.field),
dataType: "json",
success: function (res) {
layer.closeAll("loading");
if(res.code == 200){
// layer.msg("添加成功！", {icon: 1});
calendar.refetchEvents();
layer.closeAll('page');
}else{
layer.msg(res.msg, {icon: 2});
}
}
});
return false;
});
}
});
}
function openLayer(info){
addIndex=layer.open({
title : '<i class="fa fa-plus"></i> 新增日程',
type : 1,
fix : false,
skin : 'layui-layer-rim',
// 加上邊框
area : [ '470px', '450px' ],
// 寬高
content : $('#calendarForm').html(),
success: function (layero, index) {
initDateCtrl();
$("#delEdit").hide();
// 表單提交事件
form.on('submit(formSubmit)', function (d) {
d.field.roomId = roomId;
d.field.stime = info.dateStr + " " + d.field.stime + ":00";
d.field.etime = info.dateStr + " " + d.field.etime + ":00";
$.ajax({
type: 'POST',
url: '/erpcalendartask/create',//發送請求
contentType: "application/json; charset=utf-8",
async: true,
data: JSON.stringify(d.field),
dataType: "json",
success: function (res) {
layer.closeAll("loading");
if(res.code == 200){
// layer.msg("添加成功！", {icon: 1});
calendar.refetchEvents();
layer.closeAll('page');
}else{
layer.msg(res.msg, {icon: 2});
}
}
});
return false;
});
}
});
}
function changeRoom(id){
$(".external-event").each(function(i){
if(this.id==id){
$(this).css("backgroundColor", "#003399");
roomId = $(this).attr("roomId");
}else{
$(this).css("backgroundColor", "#3366CC");
}
});
calendar.refetchEvents();
}
function del(){
var id=$("#id").val();
layer.confirm('確定要刪除嗎？', {
offset: '65px',
title: '提示'
}, function (i) {
layer.close(i);
layer.load(2);
$.post("/erpcalendartask/deleteByID", {id: id}, function (res){
layer.closeAll('loading');
if(res.code == 200){
// layer.msg("刪除成功");
calendar.refetchEvents();
layer.closeAll('page');
}else{
layer.msg(res.message);
}
});
});
}
// 所有ew-event
$('body').on('click', '*[ew-event]', function () {
var event = $(this).attr('ew-event');
if (event == 'closeDialog') {
var id = $(this).parents('.layui-layer').attr('id').substring(11);
layer.close(id);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
考慮到Java服務端只是CRUD，避免文字的篇幅太長，所以大家如需繼續研究，可以在git上下載：
https://github.com/chyanwu/erp-framework
更多精彩，更多技術請關注：碼蟻在線（coding_online）
————————————————
版權聲明：本文為CSDN博主「伍婷」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/chyanwu68/article/details/90372215