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

妖狐艹你老母 2022-12-13 01:44 413阅读 0赞

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

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

## 演示效果如下： ##

![在这里插入图片描述][20201009141846946.gif_pic_center]

# BUG #

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

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

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

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

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

# ==================================== #

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

## 1.引入js ##

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

## 2.css代码 ##

**按需引入**

## 3.html端 ##

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

## 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）才会返回。对象成员同上。
                }
            });
        });

[https_fullcalendar.io]: https://fullcalendar.io/
[https_github.com_fullcalendar_fullcalendar_releases]: https://github.com/fullcalendar/fullcalendar/releases
[20201009141846946.gif_pic_center]: /images/20221123/b75ad47a6baf4ecf9779a237bade5814.png