今天一個新需求是制作一個航班日歷來訂艙。最后采用FullCalendar，網上例子大部分沒用（可能5.0版本后改動很大，導致以前的很多東西失效），大部分沒有完整版。兼容手機端（FullCalendar手機端不兼容月視圖，因此這里手機端取消月視圖），我將代碼記錄下來，供自己和網友參考
內容行高自適應，
移動端取消月視圖，
篩選時重新取數據，而不是用js修改display（數據多非常慢），
航司前后加上圖片，
修復單條數據不顯示問題，
更新2020/12/18
先看看成型的模樣：（月視圖比較大，所以截圖周視圖）
廢話不多說。上代碼：
前端代碼（可能有些不適合你們的，刪除就好）：
<!DOCTYPE html> <meta charset='utf-8' /> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('新增訂艙 New booking')" /> <!--引入FullCalendar css和js--> <link th:href='@{/css/main.css}' rel='stylesheet' /> <!--引入jQuery--> <!--<script type="text/javascript" src="js/jquery.min.js" ></script>--> <script th:src="@{/js/main.js}"/> <!--加載日歷里面的航班數據--> <script type="text/javascript"> // <div id='Calendar'></div> 官網是放這里，我放這里不行，所以我放下面了 </script> <style> body { margin: 40px 10px; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; } .advertising-div{ margin:0px 20px; width:60px; height:60px; border-radius:10px; display: inline-block; } .advertisroute-div{ margin:3px ; display: inline-block; } .advertisingImg{ width:60px; height:60px; border: 2px solid #8AC007; border-radius:10px; } .routeSpan{ padding:0px 3px; margin:10px 10px; width:10px; height:30px; border-radius:3px; border: 2px solid #8AC007; } .routeSpan:hover,.advertisingImg:hover{ border: 2px solid red; cursor:pointer } #Calendar { max-width: 1300px; margin: 0px auto; } /* Event 參數 className 的值 */ .doing:before { content:"【 未完成 】"; background-color:yellow; color:red; text-align:center; font-weight:bold; } .box{height:500px;width:100%;margin: 0 auto;position: relative; border-radius: 5px} .imgbox img{height:500px;width:100%} </style> </head> <body class="gray-bg"> <div class="wrapper animated fadeInRight "> <div class="form-group" > <!--輪播圖--> <div class="row" > <div class="col-sm-12"> <div class="banner box" id="banner-box"> <div class="imgbox" th:each="banner :${bannerInfoList}"> <a th:href="${banner.mipLink}" target="_blank"> <img th:src="@{'/profile/'+${banner.imgUrl}}" th:title="${banner.imgTitle}" class="bannerImg"/> </a> </div> </div> </div> </div> <br> <div class="row" > <div class="col-sm-12"> <div class="panel panel-primary"> <div class="panel-body"> <div th:each="schedule :${cargoFlightSchedule}" class="advertising-div"> <span th:utext="${schedule.aCimgUrl}" ></span> <span th:text="${schedule.code}" style="display:block;text-align:center"></span> </div> </div> </div> </div> </div> <div class="row" > <div class="col-sm-12"> <div class="panel panel-primary"> <div class="panel-body" id="panel-body"> <span th:each="route :${routeFlightSchedule}" th:value="${route.code}"> <div class="advertisroute-div"> <span th:utext="${route.aCimgUrl}" th:class="${route.code}+'-span'" th:value="${route.code}"></span> </div> </span> </div> </div> </div> </div> <span hidden> <a class="btn btn-success disabled" id="bookFlightAdd" name="bookFlightAdd" onclick="$.operate.add()" shiro:hasPermission="freight:bookFlight:add"> <i class="fa fa-plus"></i> 訂艙 </a> </span> <input type="hidden" id="flightData" value=""> <input type="hidden" id="isPopup" th:value="${isPopup}"> <a display id="bookFlightHidden" name="bookFlightHidden" onclick="$.operate.addFlightData($('#flightData').val(),$('#isPopup').val())" shiro:hasPermission="freight:bookFlight:add"></a> </div> <!--航班日歷--> <div id='Calendar'></div> </div> <th:block th:include="include :: footer" /> <script th:src="@{/js/banner.js}"></script> <script type="text/javascript"> // $(".banner") 這是調用插件的對象為輪播圖的父級框 // banner() 輪播圖插件函數，接收兩個參數 // 第一個參數要切換圖片的集合，必填 // 第二個參數是輪播圖的輪播方式屬性，選填，有默認規則 $(".banner").banner($(".banner").find("img"),{ but:true, // 左右按鈕默認為true butahidden:false, // 是否自動隱藏左右按鈕默認隱藏 list:true, // 導航按鈕 index:0, //初始從第幾個開始默認為0 autoPlay:true, // 自動輪播默認為true delayTiem:4000, // 延遲時間默認為2000 moveTime:800 // 遠動時間默認為300 }); $(document).ready(function(){ if (navigator.userAgent.match(/(Android|iPhone|SymbianOS|Windows Phone|iPad|iPod)/i)) { $("#banner-box").css('height','200px');//輪播圖高度調成200 $("#banner-box").children().children().children().css('height','200px'); }else{ $("#banner-box").css('height','500px');//輪播圖高度調成500 $("#imgbox").children().children().children().css('height','500px'); } }); //獲取參數 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if(r != null) return decodeURI(r[2]); return null; } var calendars; var prefix = ctx + "freight/bookFlight"; <!--加載日歷里面的航班數據--> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('Calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: windowSize(), //日歷加載時的初始視圖 timeZone: 'UTC',//時區 editable: false,//是否可以修改日歷事件 eventStartEditable:false,//允許事件的開始時間可通過拖動進行編輯 eventDurationEditable:false,//允許通過調整大小來更改事件的持續時間 themeSystem: 'bootstrap',//主題 locale: 'zh',//語言 headerToolbar: {//頭部工具欄 left: 'prev,next today', //left:headerToolbarLeft(), center: 'title', right: headerToolbarRight() }, buttonText:{//按鈕文字 today: '今天today', month: '月month', week: '周week', day: '天day', }, buttonIcons:{//按鈕圖標 prev: 'left-single-arrow', next: 'right-single-arrow', prevYear: 'left-double-arrow', nextYear: 'right-double-arrow' }, initialDate: new Date(),//初始化時間 navLinks: true, // 可以點擊天/周的名稱來瀏覽視圖嗎 dayMaxEvents: true, // 允許 "更多" 鏈接 當太多的事件 dayMaxEventRows: true, // 用於所有非時間網格視圖 moreLinkClick:"week", //點擊more按鈕時候，跳到什么視圖 contentHeight:contentHeight(),//內容高度1200 //鼠標懸浮提示 event.event.title eventMouseEnter : function( event ) { $(".italicElspan").attr("title",'點擊訂艙 Click booking'); }, dateClick: function(info) {//鼠標點擊 info.dayEl.style.backgroundColor = '#00FF99'; }, //進入日歷界面進行加載添加過的數據 events: function( fetchInfo, successCallback, failureCallback ){ var events = []; $.ajax({ type:"POST", url:prefix+"/viewData/"+GetQueryString("code"), dataType:"json", success:function(result){ var jobScheduleList = result; if(jobScheduleList.length >= 1){ $.each(jobScheduleList,function(i,j){ events.push({ id:j.id, title: j.name, //url: prefix+j.url,//設置鏈接 content:j.content,//內容（我自己定義的，框架沒有） airline:j.airline,//航司（我自己定義的，框架沒有） imageUrl:ctx+'profile/'+j.imgUrl,//圖片鏈接（我自己定義的，框架沒有） aircraftTypeUrl:ctx+'img/'+j.aircraftTypeUrl,//飛機類型鏈接（我自己定義的，框架沒有） color: '#CCCCFF',//設置顏色#666666#1ab394 start: new Date(j.startDate).format('yyyy-MM-dd'), // 解析時間 //end:new Date(j.endDate).format('yyyy-MM-dd') //className: 'doing',//設置類名 backgroundColor: '#1ab394',//設置背景顏色 display:'auto'//渲染樣式 }); }) //回調渲染日歷 successCallback(events); } }, error:function(){ //出現錯誤回調 }, }) }, //航空公司圖片注入 eventContent: function(arg) { let italicEl = document.createElement('span') italicEl.className='italicElspan'; function customOnclick() { $('#flightData').val(arg.event.extendedProps.content); // IE瀏覽器 if(document.all) { document.getElementById("bookFlightHidden").click(); } // 其它瀏覽器 else { var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); document.getElementById("bookFlightHidden").dispatchEvent(e); } } //設置點擊事件 italicEl.onclick=customOnclick; italicEl.innerHTML = '<img src="'+arg.event.extendedProps.imageUrl+'" width="30px" height="30px" style="border-radius: 15px;">'+' '+'<span>'+arg.event.title+'</span>'+' '+'<img src="'+arg.event.extendedProps.aircraftTypeUrl+'" width="20px" height="20px" style="border-radius: 15px;">'; let arrayOfDomNodes = [ italicEl ] return { domNodes: arrayOfDomNodes } }, }); calendar.render(); calendars=calendar; }); //顯示相應的航線 $(document).ready( function(){ var air= GetQueryString("code"); if(air!=null&&air!=''){ var split= air.split("-"); if(split.length==1){ var childs = $("#panel-body").children(); jQuery.each(childs, function(){ if(jQuery(this).attr("value")==air){ jQuery(this).removeAttr("hidden"); }else{ jQuery(this).attr("hidden",'hidden'); } }); } } }); //航司圖片點擊 function refetchEventssAir(air) { window.location.href=prefix+"/bookFlightPege?code="+air; $.modal.msgSuccess('顯示'+air+'數據'); } //航線文字點擊 function refetchEventssRoute(route) { window.location.href=prefix+"/bookFlightPege?code="+route; $.modal.msgSuccess('顯示'+route+'數據'); } //判斷窗口大小來顯示不同的視圖（手機端不支持月視圖） function contentHeight(){ if(window. innerWidth< 800){ return 'auto'; } else { return 1200; } } //判斷窗口大小來設置內容高度（手機端不支持月視圖） function windowSize(){ if(window. innerWidth< 800){ return 'dayGridWeek'; } else { return 'dayGridMonth'; } } //判斷窗口大小來設置頭工具欄（手機端不支持月視圖） function headerToolbarRight(){ if(window. innerWidth< 800){ return 'dayGridWeek,dayGridDay'; } else { return 'dayGridMonth,dayGridWeek,dayGridDay'; } } //將數據庫的時間戳轉成 字符串 Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes(), "s+": this.getSeconds(), "q+": Math.floor((this.getMonth() + 3) / 3), "S": this.getMilliseconds() } if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); } } return format; } //判斷是否ie瀏覽器 window.onload = function () { if (!!window.ActiveXObject || "ActiveXObject" in window) { $.modal.alertWarning("檢測到您使用IE瀏覽器，這將可能導致航班日歷無法正確加載數據，如不顯示航班數據請更換瀏覽器</br>It has been detected that you are using Internet Explorer, which may cause the flight calendar to fail to load the data properly. If the flight data is not displayed, please change your browser"); } } $(function () { var options = { createUrl: prefix + "/add", createCustomUrl: prefix + "/customAdd/{data}", modalName: "訂艙-New Booking ", }; $.table.init(options); }); // 0.01秒后自動點擊 setTimeout(function() { // IE瀏覽器 if(document.all) { //document.getElementById("bookFlightAdd").click(); } // 其它瀏覽器 else { //var e = document.createEvent("MouseEvents"); //e.initEvent("click", true, true); //document.getElementById("bookFlightAdd").dispatchEvent(e); } }, 10); </script> </body> </html>
pojo代碼：
package com.ruoyi.freight.domain; import java.util.Date; /** * 航班日歷類 * @author qianye * @create 2020-11-03 10:19 */ public class FlightCalendar { public FlightCalendar() { } public FlightCalendar(Integer id, String name, String content, String airline, String url, String imgUrl, Date startDate, Date endDate) { this.id = id; this.name = name; this.url = url; this.imgUrl = imgUrl; this.content = content; this.airline = airline; this.startDate = startDate; this.endDate = endDate; } public Integer id ; /**任務名稱*/ public String name ; /**內容*/ public String content ; /**航司*/ public String airline ; /**鏈接*/ public String url ; /**圖片鏈接*/ public String imgUrl ; /**開始時間*/ public Date startDate ; /**結束時間*/ public Date endDate ; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public String getAirline() { return airline; } public void setAirline(String airline) { this.airline = airline; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getImgUrl() { return imgUrl; } public void setImgUrl(String imgUrl) { this.imgUrl = imgUrl; } public Date getStartDate() { return startDate; } public void setStartDate(Date startDate) { this.startDate = startDate; } public Date getEndDate() { return endDate; } public void setEndDate(Date endDate) { this.endDate = endDate; } }
控制層代碼：
/** * 加載航班日歷 * @param * @return */ @RequiresPermissions({"freight:bookFlight:list"}) @PostMapping({"/viewData/{code}"}) @ResponseBody public List<FlightCalendar> ViewData(@PathVariable("code") String code) { //查詢航班計划 CargoFlightSchedule cargoFlightSchedule=new CargoFlightSchedule(); cargoFlightSchedule.setStatue("1"); cargoFlightSchedule.setBookStatue("3"); if ( !"null".equals(code) ) { String[] split = StringUtils.split(code, "-"); if (split.length > 1) { cargoFlightSchedule.setDeparturePort(split[0]); cargoFlightSchedule.setDestination(split[1]); }else{ cargoFlightSchedule.setCode(code); } } cargoFlightSchedule.setFlightTime(new Date()); List<CargoFlightSchedule> list = cargoFlightScheduleService.selectCargoFlightScheduleANDAirlinesCompanyList(cargoFlightSchedule); List<FlightCalendar> flightCalendars=new ArrayList<>(); for (int i = 0; i < list.size(); i++) { //判斷飛機類型 String aircraftTypeUrl="huo.png"; if (list.get(i).getAircraftType().equals(1)) { aircraftTypeUrl="ke.png"; } String content = list.get(i).getFlightNumber()+" "+list.get(i).getDeparturePort()+"-"+list.get(i).getDestination()+" "+DateUtil.format(list.get(i).getFlightTime(),"yyyy-MM-dd"); String title = list.get(i).getFlightNumber()+" "+list.get(i).getDeparturePort()+"-"+list.get(i).getDestination(); flightCalendars.add(new FlightCalendar(i, title, content, list.get(i).getFlightNumber().substring(0,2), "/add", list.get(i).getaCimgUrl(), aircraftTypeUrl, list.get(i).getFlightTime(), list.get(i).getFlightTime())); } return flightCalendars; }
有問題或者建議可以留言.
如果有幫到您，請點個推薦可以嗎？謝謝