【日历组件】前端使用fullcalendar组件实现会议室预约功能

清疚 2022-05-26 01:50 236阅读 0赞

## 框架描述 ##

### 使用框架技术 ###

1.  使用fullcalendar，作为日历组件的基本框架
2.  使用layer弹出框，作为填写会议室预约详情的组件

## 关键技术讲解 ##

### 日历组件的点击事件 ###

1.  点击事件使用eventClick函数实现
2.  函数中，能够通过event获取当前点击的日程详细信息

eventClick: function (event, jsEvent, view) { 
                    console.log('eventClick --- start ---');
                    //此处可以增加确认框，是否删除该预订
                    $('#calendar').fullCalendar('removeEvents', event._id);
                }

### 日历组件刷新 ###

1.  刷新前，需要对event:eventData函数进行重新封装，有两个思路
2.  思路一：在前台，将layer回传的信息，写入eventData数组中，然后刷新
3.  思路二：在layer中，不再更新eventData，而是将数据保存到数据库中，fullCalendar组件刷新时，重新从后台获取最新的日程安排。
4.  本demo中，因为是纯前端的实例，所以选择思路一实现

//将获取到的返回值，插入到日历中
                                eventsData[1] =
                                {
                                    title: '全天开会',
                                    start: row
                                };
    //刷新控件                            $('#calendar').fullCalendar('refetchEvents')

### layer回传新建日程信息 ###

1.  在layer中，增加callbackdata()函数，用于在父页面获取子页面中填写的时间
2.  在子页面点击确认后，父页面通过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 ###

<!DOCTYPE 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 ###

<!DOCTYPE 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>