敘：第一次是使用layUI以及fullcalendar開發日程管理功能，根基比較淺薄因此遇到了各種各樣的問題，索性最后完成了，現在記錄一下，方便以后再次使用時能有所幫助；
1、頁面效果
1.1、主界面
現實的日程信息背景顏色不一樣是根據已過時、正在進行中、未開始三種狀態划分的，下面會有具體代碼講到；
點擊空白處彈出新增日程信息表單，點擊已存在的日程彈出查看頁面，頁面中可以進行修改保存和刪除等；
1.2、添加：
1.3、 查看：
2、主界面代碼
直接看代碼，里面有詳細的步驟：
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body">
<div id='calendar'></div><!-- 此處就是放置日歷界面的div，注意id的使用 -->
</div>
</div>
</div>
<script>
layui.use(['fullCalendar'], function() { // layUI加載fullCalendar插件
var fullCalendar = layui.fullCalendar; // layUI聲明使用fullCalendar插件並創建其對象
fboot = layui.fboot,
$ = layui.jquery; // layUI聲明使用jquery
fullCalendar.init("calendar", { //根據id初始化日歷的div
plugins: ['dayGrid','interaction','timeGrid'],
header: { //定義日歷表的表頭有哪些信息、按鈕
left: 'prev,next,today', // 此處是前翻、后翻、返回到當前時間，前翻后翻可用於年月周日等不同的時間視圖
center: 'title', // 定義為title出現的是當前的時間或者時間段，年月周日四種視圖均有所差異
right: 'dayGridMonth,timeGridWeek,timeGridDay' // 此處是定義日歷右邊有幾種時間視圖，代碼中的分別定義了月、周、日三種視圖的按鈕，定義好后點擊就會出現相應的視圖
},
defaultView: 'dayGridMonth', //默認顯示視圖：dayGridMonth、timeGridWeek、timeGridDay
allDaySlot : false, // 不單獨顯示全天的頭框，有興趣的可以試一下，此屬性默認為true
//unselectAuto: true, // 是否單擊頁面上的其他位置將導致清除當前選擇，此屬性默認為true
navLinks: true, //確定日期名稱和周名稱是否可單擊，此屬性默認為false，設置為true后月視圖日歷上的時間可被點擊直接進入日視圖
editable: true, //確定是否可以修改日歷上的事件，此屬性默認為false。
//selectable: false, // 允許用戶通過單擊並拖動來突出顯示多個日期或時間段，默認false
eventLimit: true, // 限制一天顯示的事件數。其余的將出現在popover中，默認： false
// events接口：加載日歷並將當前日歷的起止時間傳給后台，經后台處理后得到在起止時間段內所有日程
events: function(info,callback){
fboot.get('/oa/schedule/scheduleList', { // 后台路徑
data: {
// info是fullcalendar封裝的關於日歷的信息對象，可直接調用，里面有此視圖的開始結束時間
start: info.startStr,
end: info.endStr
},
// 后台獲取的是一個list集合，里面存放的是一條條日程信息
success: function(resp) {
// 創建events數組對象，目的是：放入fullcalendar設定好的數據展示模式（還有json形式的等，不一定非要使用數組類型的）
var events = []; //
// 此段是根據當前時間與每條數據的開始結束時間相匹對，以此來賦予背景顏色
var currentTime = new Date();
resp.map(function(eventEl) { // .map會將resp中的元素逐條處理，就像Java后台中的forEach方法
var bColor = null;
if(currentTime < eventEl.startTime){
bColor = 'green';
}
if(currentTime >= eventEl.startTime && currentTime <= eventEl.endTime){
bColor = 'red';
}
if(currentTime > eventEl.endTime){
bColor = 'slategray ';
}
// 往events數組中放入fullcalender展示數據所需要的數據格式
events.push({
title: eventEl.title,// 日程標題
start: eventEl.startTime,// 日程開始時間
end: eventEl.endTime,// 日程結束時間
id: eventEl.id, // 日程id
color: bColor, // 背景色
});
})
// 數據裝載完成后，回調events方法
callback(events);
}
});
},
// dateClick接口：點擊空白處的方法，此方法中的info是用戶點擊時間點的信息
dateClick: function(info) {
// 獲得info中的時間
var date = info.dateStr;
fboot.modalForm('添加', '/oa/schedule/add', { // 聯系后台，獲得一個填寫新增的表單頁
formId: 'oaSchedule',
option: { area: ['670px', '410px'] },
param: {date: date},
callback: function(closeModal, formData) {// 表單點擊保存后獲得表單中的所有信息
fboot.post('/oa/schedule', { // 保存數據到數據庫的后台方法路徑
data: formData, // 傳遞到后台的數據
success: function() {
layer.closeAll('page'); // 保存成功后關閉彈出層的表單
location.reload(); // 刷新界面為新增的日程信息
}
});
}
});
},
// eventClick接口：單擊日歷上的日程信息方法，方法內部所使用的邏輯與新增的基本一樣
eventClick: function(event) {
// 這是為了獲得點被點擊日程的id值，此id值被放在event對象的event對象中，有興趣的同學可以打個斷點看看里面都有什么~
var id = event.event.id;
fboot.modalForm('日程信息', '/oa/schedule/edit', {
formId: 'oaSchedule',
option: { area: ['670px', '455px'] },
param: {id: id},
callback: function(closeModal, formData) {
fboot.put('/oa/schedule/' + id, {
data: formData,
success: function(result) {
layer.closeAll('page');
layer.msg('操作成功！');
location.reload();
}
});
}
});
}
});
});
</script>
剩下的關於修改、刪除等也就沒什么的好記錄的了~
3、數據庫
CREATE TABLE `oa_schedule` (
`id` bigint(20) NOT NULL COMMENT '日程ID',
`title` varchar(32) NOT NULL COMMENT '日程標題',
`content` varchar(255) DEFAULT NULL COMMENT '日程內容',
`create_time` datetime NOT NULL COMMENT '日程創建時間',
`create_user` varchar(16) DEFAULT NULL COMMENT '日程創建人姓名',
`start_time` datetime NOT NULL COMMENT '日程開始時間',
`end_time` datetime NOT NULL COMMENT '日程完成時間',
`all_day` tinyint(1) unsigned NOT NULL COMMENT '是否全天【 true / false 】',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='日程信息表';
pass：歡迎多指正、交流，共同進步！