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??)';//請求的Urlvar 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,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: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}// console.log(endDate); //得結束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。}});});

總結

以上是生活随笔為你收集整理的fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。