fullcalendar官网：https://fullcalendar.io/
插件下载地址（v5.3.2版本）：/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??)';//请求的Urlvar listUrl = '#(path)/manager/censusManager/dtStatisticBusiness/list_airport?monthRangeDateStr='+monthRangeDateStr;//日历定义为全局变量，方便刷新日历var calendar = "";var table = "";//日历的方法document.addEventListener('DOMContentLoaded', function() {//绑定IDvar 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,nextYearcenter: '',//titleright: ''//dayGridMonth,dayGridWeek,dayGridDay},contentHeight: 650,//内容的高度，建议与日历的高度保持一致，这个属性还没试出来具体效果fixedWeekCount:false,//默认显示6行，现在插件随机4-5行navLinks: false, // 点击一天后发生的情况，就是禁止点击日历 每个单元格里面的数字日期editable: true,//允许编辑表格//往日历添加数据的核心方法//events.push添加 ，我这里添加的是自定义的htmlevents: 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.titlevar 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: , month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}// console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。}});});
