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

框架描述

使用框架技术

  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


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

你可能感兴趣的:(web开发)