FullCalendar v5.3.2版本制作一个航班日历
今天一个新需求是制作一个航班日历来订舱。最后采用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; }
有问题或者建议可以留言.
如果有帮到您，请点个推荐可以吗？谢谢
