[Calendar component] The front-end uses the fullcalendar component to realize the conference room reservation function

frame description

Use framing techniques

Use fullcalendar as the basic framework for calendar components
Use the layer popup as a component to fill in the meeting room reservation details

Key technology explanation

Click event of the calendar component

The click event is implemented using the eventClick function
In the function, you can get the details of the currently clicked schedule through the event

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

Calendar component refresh

Before refreshing, the event:eventData function needs to be repackaged. There are two ideas.
Idea 1: In the foreground, write the information returned by the layer into the eventData array, and then refresh
Idea 2: In the layer, the eventData is no longer updated, but the data is saved in the database. When the fullCalendar component is refreshed, the latest schedule is obtained from the background again.
In this demo, because it is a pure front-end instance, I choose the idea of one implementation.

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

layer returns new schedule information

In the layer, add the callbackdata() function to obtain the time filled in the child page from the parent page
After clicking confirm on the child page, the parent page obtains the callback event through the yes function, and obtains the schedule information filled in the child page through the callbackdata function

The callbackdata function of the child page

function callbackdata() {
            var row = $("#orderDate").val();
            return row;
        }

The callback function of the parent page

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 ---');
                    }
                });

Note: For the controls here, btn:['确定','取消'],this sentence must be added to obtain the callback event of the sub-page click confirmation in the yes function.

all code

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>

[Calendar component] The front-end uses the fullcalendar component to realize the conference room reservation function

frame description

Use framing techniques

Key technology explanation

Click event of the calendar component

Calendar component refresh

layer returns new schedule information

The callbackdata function of the child page

The callback function of the parent page

all code

calendar.html

form.html

Guess you like