叙：第一次是使用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：欢迎多指正、交流，共同进步！