fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格

fullcalendar官网：https://fullcalendar.io/
插件下载地址（v5.3.2版本）：https://github.com/fullcalendar/fullcalendar/releases

项目中用的是 LayerUi弹窗+fullcalendar日历插件，上面是效果图
我这里用的是v5.3.2版本，5.x以上版本好像改版了，命令与4.X完全不一样
注意：日历插件里面的表格是 自定义的HTML代码

演示效果如下：

BUG

1.就是点击单元格后，弹出窗口，填完数据以后，日历是全局渲染，性能会很差

2.点击单元格，弹出窗口的时候，没有办法获取单元格的数据，我采用的是接口获取当前日期的数据，性能差

3.点击单元格交互响应慢，体验不是太好

以上如果有好的方法，欢迎留言交流谢谢

如果不介意我代码中的BUG，那就开始把！!

====================================

下载下的fullcalendar安装包 在examples也有官方自带的一些例子

1.引入js

zh-cn.js必须要有，否则默认是英文

    <link rel="stylesheet" href="static/libs/fullcalendar/lib/main.css" >
    <script src="static/libs/fullcalendar/js/jquery.min.js" type="text/javascript" ></script>
    <script src="static/libs/fullcalendar/lib/main.js" type="text/javascript" ></script>
    <script src="static/libs/fullcalendar/lib/locales/zh-cn.js" type="text/javascript" ></script>

2.css代码

按需引入

<style>
        .box-time{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 278px;
        }
        .time{

            border: 1px solid #D2D2D2;
            background-color: #f7f7f7;;
            height: 36px;
            line-height: 36px;
            width: 100px;
            text-align: center;


        }
        body {

            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 1100px;
            margin: 0 auto;
        }
        .layui-form-item{
            margin: 20px 0px;
        }
    </style>

3.html端

fullcalender日历就只有 <div id='calendar' ></div>这一句，其他的都是layerUi的

<div class="layui-inline" style="max-width: 1100px;display: flex;justify-content: space-between;align-items: center;margin: 0px auto">
            <div class="box-time">
                    <div class="time" >选择日期</div>
                    <div class="layui-input-inline" style="float: left">
                        <!--background-color: #f2f2f2;-->
                        <input type="text" class="layui-input" id="test3" placeholder="yyyy-MM">
                    </div>
                </div>
            </div>
            <div id='calendar' ></div>

4.js代码

fullcalendar核心代码是 document.addEventListener里面的

 	//日期范围
    var monthRangeDateStr ='#(nowRangeDateStr??)';
    //请求的Url
    var listUrl = '#(path)/manager/censusManager/dtStatisticBusiness/list_airport?monthRangeDateStr='+monthRangeDateStr;
    //日历定义为全局变量，方便刷新日历
    var calendar = "";
    var table = "";
    //日历的方法
    document.addEventListener('DOMContentLoaded', function() {
    	//绑定ID		
        var calendarEl = document.getElementById('calendar');
		//核心方法
        calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'zh-cn',//日历的语言，中文，必须引入开发的zh-cn的js
         //   aspectRatio: 1.2,//日历的宽比 可以先忽略
            height: 650, //日历高度

            showNonCurrentDates:false,//在月视图中，应该完全渲染上个月还是下个月的日期。为false代表非本月的数据，置灰
            //日历上方的导航栏的值，我这里置空了，因为我这里是自定义日历的导航栏，所以不需要自带的导航栏属性 （下面每个属性注释后面的值，就是原本的值）
            headerToolbar: {
                left: '',//prevYear,prev,next,nextYear
                center: '',//title
                right: ''//dayGridMonth,dayGridWeek,dayGridDay
            },
            
            contentHeight: 650,//内容的高度，建议与日历的高度保持一致，这个属性还没试出来具体效果
            fixedWeekCount:false,//默认显示6行，现在插件随机4-5行
            navLinks: false, // 点击一天后发生的情况，就是禁止点击日历 每个单元格里面的数字日期
            editable: true,//允许编辑表格
            //往日历添加数据的核心方法
            //events.push添加 ，我这里添加的是自定义的html
            events: function(arg, callback) {


                var events = [];
                $.ajax({
                    url: "#(path)/manager/censusManager/dtStatisticBusiness/list_fullcalender_airport/",
                    data: {
                        start_date:arg.startStr,
                        end_date:arg.endStr
                    },
                    type: "POST",
                    success: function (data) {
                        if(data.code =='0'){

                            for (var i=0; i<data.data.length; i++)
                            {
                                var singleData1 = data.data[i];

                                 if(singleData1.transport_pre!=null&&singleData1.transport_pre!=''){
                                    //日期时间按顺序 加一个小时 不然排序错误
                                    var reportDate =  stringToDate(singleData1.report_date);
                                    var addHour = reportDate.setHours(reportDate.getHours() + 2);

                                    events.push({
                                        title: '<div style="font-size: 16px;display: flex;align-items: center"><span style="margin:0 5px;width:10px;height:10px;border-radius:50%;background-color:cadetblue;display: block"></span>'+singleData1.transport_pre+'</div>',
                                        start: addHour,
                                        editable: false,
                                        allDay: false,
                                        //  backgroundColor: '#2C3E50',
                                        //borderColor: '#2C3E50'
                                    });
                                }

							//渲染到日历
                            callback(events);

                        }

                    }
                });


            },

             //html内容前置条件，如果没有这一句，自定义的html不生效，必须
            eventContent: function(arg, createElement) {
                var italicEl = document.createElement('span');
                italicEl.innerHTML = arg.event._def.title
                var arrayOfDomNodes = [italicEl]
                return {
                    domNodes: arrayOfDomNodes
                }

            },


            //点击事件的回调
            eventClick: function(info) {
				//info.event.startStr.substr(0,10) 表示当前点击单元的日期
                SingleData(info.event.startStr.substr(0,10));
            },
			//点击没有事件单元格的回调
            dateClick: function(info) {
               //alert('Clicked on: ' + info.dateStr);
               // alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
                //alert('Current view: ' + info.view.type);
                SingleData(info.dateStr);
            },

        });

        calendar.render();
    });
    //日历修改数据接口
    // calendar.refetchEvents(); 核心方法，重新刷新日历
    function SingleData(report_date) {

        //查询当前日期的数据
        $.ajax({
            url: "#(path)/manager/censusManager/dtStatisticBusiness/singledata_airport/",
            data: {
                report_date: report_date
            },
            type: "POST",
            success: function (data) {
                if(data.code =='0'){
                    var passenger_pre = null;

                    //undefined的问题
if(data.data.passenger_pre!=undefined&&data.data.passenger_pre!=null&&data.data.passenger_pre!=""){
                        passenger_pre = data.data.passenger_pre;
                    }else{
                        passenger_pre="";
                    }

						//layerUi的弹窗
                    layui.use('layer', function(){ 
                        var $ = layui.jquery, layer = layui.layer; 
                        layer.open({
                            type: 1 //此处以iframe举例
                            ,title: report_date+'数据上报'
                            ,area: ['450px', '320px']
                            ,offset: 'auto'
                            ,content: ' <div style="text-align: center">  <div class="layui-form-item">\n' +
                            '            <div class="layui-inline">\n' +
                            '            <div class="layui-form-label" style="width: 120px">旅客吞吐量(万人)</div>\n' +
                            '            <div class="layui-input-inline">\n' +
                            '            <input type="tel" name="phone" id="passengerData" value="'+ passenger_pre+'" lay-verify="required|phone" autocomplete="off" class="layui-input">\n' +
                            '            </div>\n' +
                            '            </div>\n' +
                            '    </div>   </div>'
                            ,btn: ['提交', '关闭'] //只是为了演示
                            ,yes: function(){
                                var passengerData = $('#passengerData').val();
                                var transportData = $('#transportData').val();
                                var cargoData = $('#cargoData').val();

                                /*
                                  if (chanlContent == "") {
                                      layer.alert("退回内容不可为空", {icon: 2});
                                      return false;
                                  }*/

                                $.ajax({
                                    url: "#(path)/manager/censusManager/dtStatisticBusiness/updateSingle/",
                                    data: {
                                        report_date: report_date,
                                        passenger_pre: passengerData,
                                        transport_pre:transportData,
                                        cargo_pre: cargoData
                                    },
                                    type: "POST",
                                    success: function (data) {
                                        if(data.code =='success'){
                                            //刷新日历事件
                                            calendar.refetchEvents();


                                        }
                                        layer.closeAll();

                                    }
                                });


                            }
                            ,btn2: function(){
                                layer.closeAll();
                            }

                        });


                    })



                }

            }
        });



    }

    /*
    日期转字符串
     */
    function stringToDate(str){
        var tempStrs = str.split(" ");
        var dateStrs = tempStrs[0].split("-");
        var year = parseInt(dateStrs[0], 10);
        var month = parseInt(dateStrs[1], 10) - 1;
        var day = parseInt(dateStrs[2], 10);
        var date = new Date(year, month, day);
        return date;
    }
    //选择日期
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        laydate.render({
            elem: '#test3'
            ,type: 'month'

            ,value: '#(nowDateStr??)'
            ,done: function(value, date, endDate){
                calendar.gotoDate(value);
                //console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                // console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });
    });