叙:第一次是使用layUI以及fullcalendar开发日程管理功能,根基比较浅薄因此遇到了各种各样的问题,索性最后完成了,现在记录一下,方便以后再次使用时能有所帮助;



layUI与FullCalendar结合使用示例

  • 1、页面效果
    • 1.1、主界面
    • 1.2、添加:
    • 1.3、 查看:
  • 2、主界面代码
  • 3、数据库
  • 《END》



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:欢迎多指正、交流,共同进步!


《END》