【日历组件】前端使用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

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


<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>


<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>


<script src="js/jquery-ui.custom.min.js"></script>

<!-- Full Calendar -->
<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>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>
    <script>
        function callbackdata() {
            var row = $("#orderDate").val();
            return row;
        }
    </script>
</body>

</html>

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

框架描述

使用框架技术

关键技术讲解

日历组件的点击事件

日历组件刷新

layer回传新建日程信息

子页面的callbackdata函数

父页面的回调函数

全部代码

calendar.html

form.html

猜你喜欢