因为公司业务需求的问题，所以需要实现一个实验室预约系统，刚开始又要需求不明确，我是按照市面上流行的会议室预约的设计来设计的，使用的是Fullcalendar框架，后台语言使用的是我比较拿手的PHP，也根据实际需要对系统做了调整。
fullcalendar的使用
首先，需要有PHP的运行环境，个人比较推荐xampp。环境安装好后，就是数据库设计了，根据我的需求，我设计了三张表，calendar用于存储预约事件，dev用于存储设备，lab用于存储实验室，其中，lab 、dev与calendar是多对一的关系，lab与dev是一对多的关系，根据需求将lab与dev的数据输入并关联 运行环境和数据库表准备好后，接下来就是界面设计以及功能实现了。为了使界面更加美观，我使用的layui框架作为前端框架。 新建cal_opt.php为预约使用界面，开头引入fullcalendar与layui：
<link href='css/fullcalendar.min.css' rel='stylesheet' />
<link href='layui/css/layui.css' rel='stylesheet' />
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<link href='css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='layui/layui.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/zh-cn.js'></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
添加 <div id='calendar'></div>后，界面上就会出现一个日历块，当然我们也可以对日历进行优化：
<style type="text/css">
#calendar{width:960px; margin:20px auto 10px auto}
.fancy{width:450px; height:auto}
.fancy h3{height:30px; line-height:30px; border-bottom:1px solid #d3d3d3; font-size:14px}
.fancy form{padding:10px}
.fancy p{height:28px; line-height:28px; padding:4px; color:#999}
.input{height:20px; line-height:20px; padding:2px; border:1px solid #d3d3d3; width:100px}
.btn{-webkit-border-radius: 3px;-moz-border-radius:3px;padding:5px 12px; cursor:pointer}
.btn_ok{background: #360;border: 1px solid #390;color:#fff}
.btn_cancel{background:#f0f0f0;border: 1px solid #d3d3d3; color:#666 }
.btn_del{background:#f90;border: 1px solid #f80; color:#fff }
.sub_btn{height:32px; line-height:32px; padding-top:6px; border-top:1px solid #f0f0f0; text-align:right; position:relative}
.sub_btn .del{position:absolute; left:2px}
</style>
同时引入语言包汉化，并根据需求改变代码:
closeText : "关闭",
prevText : "<<",
nextText : ">>",
然后是对fullcalendar本身进行-配置，fullcalendar的配置参数：
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: '2017-09-12',
buttonIcons: false,
weekNumbers: true,
navLinks: true,
editable: true,
eventLimit: true,
events: 'json.php',//数据处理文件
dayClick: function(date, allDay, jsEvent, view) {
//预约点击事件
document.getElementById("startdate").value=new Date(date).Format("yyyy-MM-dd HH:mm:ss");
document.getElementById("enddate").value=new Date(date).Format("yyyy-MM-dd HH:mm:ss");
document.getElementById("action").value='add';
layer.open({
type:1,
title:'预定实验室',
btn:['取消','确定'],
skin:"layui-layer-molv",
area: ['620px', '600px'], //宽高
content:$("#contracText"),
btn: ['确定', '取消']
,yes: function(){
$("#add_form").submit();
layer.closeAll();
}
,btn2: function(){
layer.closeAll();
}
});
},
eventClick:function(event){
//已预约的事件点击
var ids=event.id;//事件id
}
//2
});
//1
});
上段代码中的json.php就是fullcalendar的数据处理文件。
数据存储以及数据处理
界面有了，接下里就是数据的处理了，我们在上段代码的日历点击事件后面加上一段代码，弹框是依赖于layui，提交数据到do.php，注意，这里的的时间格式是yyy-mm-dd hh:mm:ss将在后台转换成时间戳，转换成时间戳是为了后面比较时间，运算速度快。 然后是预约事件的编辑以及删除，fullcalendar提供的eventclick事件可以提供事件的id，我们可以根据这个id值来对事件进行删除或编辑的行为。
到目前为止，大致的功能就做好了，献上我的代码。 下载