【日历组件】前端使用fullcalendar组件实现会议室预约功能
框架描述
使用框架技术
- 使用fullcalendar，作为日历组件的基本框架
- 使用layer弹出框，作为填写会议室预约详情的组件
关键技术讲解
日历组件的点击事件
- 点击事件使用eventClick函数实现
- 函数中，能够通过event获取当前点击的日程详细信息
eventClick: function (event, jsEvent, view) {
console.log('eventClick --- start ---');
//此处可以增加确认框，是否删除该预订
$('#calendar').fullCalendar('removeEvents', event._id);
}日历组件刷新
- 刷新前，需要对event:eventData函数进行重新封装，有两个思路
- 思路一：在前台，将layer回传的信息，写入eventData数组中，然后刷新
- 思路二：在layer中，不再更新eventData，而是将数据保存到数据库中，fullCalendar组件刷新时，重新从后台获取最新的日程安排。
- 本demo中，因为是纯前端的实例，所以选择思路一实现
//将获取到的返回值，插入到日历中
eventsData[1] =
{
title: '全天开会',
start: row
};
//刷新控件 $('#calendar').fullCalendar('refetchEvents')layer回传新建日程信息
- 在layer中，增加callbackdata()函数，用于在父页面获取子页面中填写的时间
- 在子页面点击确认后，父页面通过yes函数，获取回调事件，并通过callbackdata函数，获取子页面填写的日程信息
子页面的callbackdata函数
function callbackdata() {
var row = $("#orderDate").val();
return row;
}父页面的回调函数
parent.layer.open({
type: 2,
title: false,
closeBtn: false,
shade: [0],
area: ['340px', '500px'],
offset: 'auto', //右下角弹出
shift: 2,
btn:['确定','取消'],
content: ['form_basic_test.html', 'no'], //iframe的url，no代表不显示滚动条
yes: function(index){ //此处用于演示
console.log('关闭弹出层，获取返回值 --- start ---');
var row = parent.window["layui-layer-iframe" + index].callbackdata();
if(row) {
//将获取到的返回值，插入到日历中
eventsData[1] =
{
title: '全天开会',
start: row
};
$('#calendar').fullCalendar('refetchEvents')
parent.layer.close(index);
}else{
parent.layer.msg('请输入预订信息',{icon:0});
}
console.log('关闭弹出层，获取返回值 --- end ---');
}
});注意：此处的控件，必须增加btn:['确定','取消'],这句话，才能够在yes函数中，获取子页面点击确认的回调事件
全部代码
calendar.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 日历title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="css/plugins/fullcalendar/fullcalendar.css" rel="stylesheet">
<link href="css/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
head>
<body class="white-bg">
<div class="wrapper wrapper-content">
<div class="row animated fadeInDown">
<div class="col-sm-2" style="display: none">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>会议内容h5>
div>
<div class="ibox-content">
<div id='external-events'>
<p>快速申请会议室p>
<div class='external-event navy-bg'>08:00~09:00占用div>
<div class='external-event navy-bg'>09:00~10:00占用div>
<div class='external-event navy-bg'>10:00~11:00占用div>
<div class='external-event navy-bg'>11:00~12:00占用div>
<div class='external-event navy-bg'>14:00~15:00占用div>
<div class='external-event navy-bg'>15:00~16:00占用div>
<div class='external-event navy-bg'>16:00~17:00占用div>
<div class='external-event navy-bg'>17:00~18:00占用div>
<div class='external-event navy-bg'>上午占用div>
<div class='external-event navy-bg'>下午占用div>
<div class='external-event navy-bg'>全天占用div>
div>
div>
div>
div>
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>会议室使用情况h5>
div>
<div class="ibox-content">
<button id="addScheduleBtn" type="button" class="btn btn-primary btn-rounded">添加会议室button>
div>
<div class="ibox-content">
<div id="calendar">div>
div>
div>
div>
div>
div>
<script src="js/jquery.min.js?v=2.1.4">script>
<script src="js/bootstrap.min.js?v=3.3.6">script>
<script src="js/content.js?v=1.0.0">script>
<script src="js/jquery-ui.custom.min.js">script>
<script src="js/plugins/fullcalendar/fullcalendar.min.js">script>
<script>
var eventsData = new Array();
eventsData[0] =
{
title: '全天开会',
start: '2018-04-01'
};
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
//$(this).remove();
}
},
events: eventsData,
eventDrop: function (event, dayDelta, revertFunc) {
//do something here...
console.log('eventDrop --- start ---');
console.log('eventDrop被执行，Event的title属性值为：', event.title);
if (dayDelta != 0) {
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta + '天！');
} else {
console.log('eventDrop被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('eventDrop --- end ---');
// ...
},
eventClick: function (event, jsEvent, view) {
console.log('eventClick --- start ---');
//此处可以增加确认框，是否删除该预订
$('#calendar').fullCalendar('removeEvents', event._id);
}
});
});
//新增日历点击事件
$("#addScheduleBtn").click(
function addSchedule() {
//弹出需要增加的日历内容
console.log('弹出需要增加的日历内容 --- start ---');
parent.layer.open({
type: 2,
title: false,
closeBtn: false,
shade: [0],
area: ['340px', '500px'],
offset: 'auto', //右下角弹出
shift: 2,
btn:['确定','取消'],
content: ['form.html', 'no'], //iframe的url，no代表不显示滚动条
yes: function(index){ //此处用于演示
console.log('关闭弹出层，获取返回值 --- start ---');
var row = parent.window["layui-layer-iframe" + index].callbackdata();
if(row) {
//将获取到的返回值，插入到日历中
eventsData[1] =
{
title: '全天开会',
start: row
};
$('#calendar').fullCalendar('refetchEvents')
parent.layer.close(index);
}else{
parent.layer.msg('请输入预订信息',{icon:0});
}
console.log('关闭弹出层，获取返回值 --- end ---');
}
});
});
script>
body>
html>
form.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 基本表单title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=4.1.0" rel="stylesheet">
head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>添加会议室h5>
div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-6 b-r">
<p>欢迎使用会议室预约功能O(∩_∩)O哈哈~p>
<form role="form">
<div class="form-group">
<label>预订日期label>
<input id="orderDate" type="email" placeholder="请输入预订日期" class="form-control">
div>
<div class="form-group">
<label>预订时间label>
<input type="password" placeholder="请输入预订时间" class="form-control">
div>
<div class="form-group">
<label>预订人label>
<input type="password" placeholder="请输入预订人" class="form-control">
div>
form>
div>
div>
div>
div>
div>
div>
div>
<script src="js/jquery.min.js?v=2.1.4">script>
<script src="js/bootstrap.min.js?v=3.3.6">script>
<script src="js/content.js?v=1.0.0">script>
<script src="js/plugins/iCheck/icheck.min.js">script>
<script>
function callbackdata() {
var row = $("#orderDate").val();
return row;
}
script>
body>
html>