FullCalendar v5.3.2版本制作一个航班日历Demo
今天一个新需求是制作一个航班日历来订舱。然后我就各种找，最后找到FullCalendar，过程非常煎熬，网上例子大部分没用，大部分没有完整版。官网教程又不是很详细。搞了几天才彻底搞好这个航班日历，有需要的可以参考
先看看成型的模样：
废话不多说。上代码：
前端代码：
<!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('新增订舱')" />
<!--引入FullCalendar css和js 自己去FullCalendar官网下载-->
<link href='/cargo/css/main.css' rel='stylesheet' />
<script src="/cargo/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;
} #Calendar {
max-width: 1500px;
margin: 0 auto;
} /* Event 参数 className 的值 */
.doing:before {
content:"【 未完成 】";
background-color:yellow;
color:red;
text-align:center;
font-weight:bold;
}
</style>
</head> <body class="gray-bg">
<div class="wrapper animated fadeInRight ">
<div hidden class="form-group" style="margin-left: 75px">
<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>
<input type="hidden" id="flightData" value="">
<a display id="bookFlightHidden" name="bookFlightHidden" onclick="$.operate.addFlightData($('#flightData').val())" shiro:hasPermission="freight:bookFlight:add"></a>
</div> <!--航班日历-->
<div id='Calendar'></div>
</div> <th:block th:include="include :: footer" />
<script type="text/javascript">
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',
center: 'title',
right: headerToolbarRight()
},
dateClick: function(info) {//鼠标点击
info.dayEl.style.backgroundColor = '#00FF99';
},
buttonText:{//按钮文字
today: '今天',
month: '月',
week: '周',
day: '天',
},
initialDate: new Date(),//初始化时间
navLinks: true, // 可以点击天/周的名称来浏览视图吗
dayMaxEvents: true, // 允许 "更多" 链接 当太多的事件
dayMaxEventRows: true, // 用于所有非时间网格视图
moreLinkClick:"week", //点击more按钮时候，跳到什么视图
//鼠标悬浮提示 event.event.title
eventMouseEnter : function( event ) {
$(".fc-daygrid-event").attr("title",'点击订舱');
}, //进入日历界面进行加载添加过的数据
events: function( fetchInfo, successCallback, failureCallback ){
var events = [];
$.ajax({
type:"POST",
url:prefix+"/viewData",
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:'$.operate.add()',//内容（我自己定义的，框架没有）
imageUrl:'/profile/'+j.imgUrl,//图片链接（我自己定义的，框架没有）
color: 'pink',//设置颜色
start: new Date(j.startDate).format('yyyy-MM-dd'), // 解析时间
//end:new Date(j.endDate).format('yyyy-MM-dd')
//className: 'doing',//设置类名
//backgroundColor: 'gray',//设置背景颜色
});
})
//回调渲染日历
successCallback(events);
}
},
error:function(){
//出现错误回调
},
})
}, //航空公司图片注入
eventContent: function(arg) {
let italicEl = document.createElement('span')
if (arg.event.extendedProps.isUrgent) {
italicEl.onclick(setTimeout());
italicEl.innerHTML = '<img src="'+arg.event.extendedProps.imageUrl+'" width="30px" height="30px" style="border-radius: 15px;">'+' '+'<span>'+arg.event.title+'</span>';
} else {
function abc() {
$('#flightData').val(arg.event.title);
// 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=abc;
italicEl.innerHTML = '<img src="'+arg.event.extendedProps.imageUrl+'" width="30px" height="30px" style="border-radius: 15px;">'+' '+'<span>'+arg.event.title+'</span>';
}
let arrayOfDomNodes = [ italicEl ]
return { domNodes: arrayOfDomNodes }
},
});
calendar.render();
}); //判断窗口大小来显示不同的视图（手机端不支持月视图）
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;
} $(function () {
var options = {
createUrl: prefix + "/add",
createCustomUrl: prefix + "/customAdd/{data}",
modalName: "订舱",
};
$.table.init(options);
});
</script>
</body>
</html>
后端代码：
/**
* 航班日历
* @author qianye
* @create 2020-11-03 10:19
*/
public class FlightCalendar {
public FlightCalendar() {
} public FlightCalendar(int id, String name, String content, String url, String imgUrl, Date startDate, Date endDate) {
this.id = id;
this.name = name;
this.url = url;
this.imgUrl = imgUrl;
this.content = content;
this.startDate = startDate;
this.endDate = endDate;
} public int id ;
/**任务名称*/
public String name ;
/**内容*/
public String content ;
/**链接*/
public String url ;
/**图片链接*/
public String imgUrl ;
/**开始时间*/
public Date startDate ;
/**结束时间*/
public Date endDate ; public int getId() {
return id;
} public void setId(int 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 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"})
@ResponseBody
public List<FlightCalendar> ViewData() { //查询航班计划
CargoFlightSchedule cargoFlightSchedule=new CargoFlightSchedule();
cargoFlightSchedule.setStatue("1");
cargoFlightSchedule.setBookStatue("3");
cargoFlightSchedule.setFlightTime(new Date());
List<CargoFlightSchedule> list = cargoFlightScheduleService.selectCargoFlightScheduleANDAirlinesCompanyList(cargoFlightSchedule); List<FlightCalendar> flightCalendars=new ArrayList<>();
for (int i = 0; i < list.size(); i++) {
String title = list.get(i).getFlightNumber()+" "+list.get(i).getDeparturePort()+"-"+list.get(i).getDestination()+" "+DateUtil.format(list.get(i).getFlightTime(),"yyyy-MM-dd");
flightCalendars.add(new FlightCalendar(i,
title,
"cargoFlightSchedules.get(i).getFlightNumber()",
"/add",
list.get(i).getaCimgUrl(),
list.get(i).getFlightTime(),
list.get(i).getFlightTime()));
} return flightCalendars;
}
有问题或者建议可以留言.
如果有帮到您，请点个推荐可以吗？谢谢
FullCalendar v5.3.2版本制作一个航班日历Demo的更多相关文章
- 用Phaser来制作一个html5游戏——flappy bird （二）
在上一篇教程中我们完成了boot.preload.menu这三个state的制作,下面我们就要进入本游戏最核心的一个state的制作了.play这个state的代码比较多,我不会一一进行说明,只会把一 ...
- Android学习笔记（十二）——实战：制作一个聊天界面
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...
- 制作一个类似苹果VFL的格式化语言来描述UIStackView
在项目中总是希望页面上各处的文字,颜色,字体大小甚至各个视图控件布局都能够在发版之后能够修改以弥补一些前期考虑不周,或者根据统计数据能够随时进行调整,当然是各个版本都能够统一变化.看到这样的要求后,第 ...
- Qt for Windows：Qt 5.4.0 MinGW 静态编译版本制作 (转)
大致流程: 1.安装Qt(源码版)以及其他必要的环境 2.编译/安装 3.配置 4.使用 ----------正文分割线---------- 1.安装Qt(源码版) 1.1 下载Qt(两个地址二选一即 ...
- iOS自定义控件教程：制作一个可重用的旋钮
当你的APP需要一些新功能时,自定义UI控件会十分有用,尤其是这些自定义控件可以在其他APP里面很好的重用.Colin Eberhart写过一篇很棒的介绍自定义UI控件的教程.这个教程涉及的是一个继承 ...
- Swift 制作一个新闻通知中心插件1
使用 Swift 制作一个新闻通知中心插件(1) 随着 iOS 8 的发布,苹果为开发者们开放了很多新的 API,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...
- 【URLOS应用开发基础】10分钟制作一个nginx静态网站环境应用
URLOS开发者功能已上线有一段时间了,目前通过部分开发者的使用体验来看,不得不说URLOS在服务器软件开发效率方面确实有着得天独厚的优势,凭借docker容器技术与其良好的应用生态环境,URLOS必 ...
- PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例
前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...
- 制作一个64M的U盘启动盘(mini linux + winpe +dos toolbox)
制作一个64M的U盘启动盘(mini linux + winpe +dos toolbox) 自己动手定制winpe+各类dos工具箱U盘启动盘+minilinux 由于一个64M老U盘,没什么用,拿 ...
随机推荐
- Tensorflow学习笔记No.0
这里更新一些学习Tensorflow过程中可能用到的实用工具. Jupyter Notebook Jupyter Notebook 是一个非常方便的python编程工具,支持可视化,对于学习pytho ...
- LiteOS-任务篇-源码分析-任务调度函数
目录 前言 笔录草稿 核心源码分析 osTaskSchedule函数源码分析 osPendSV函数源码分析 TaskSwitch函数源码分析 调度上层源码分析 osSchedule函数源码分析 LOS ...
- mysql物理优化器代价模型分析【原创】
1. 引言 mysql的sql server在根据where condition检索数据的时候,一般会有多种数据检索的方法,其会根据各种数据检索方法代价的大小,选择代价最小的那个数据检索方法. 比如说 ...
- 回炉重造系列-C# func and action委托是什么？
如题: C# func and action委托是什么? 1) 回答这个问题之前,我们需要了解什么是委托(英文 Delegate )? 为了便于理解,再往前推一步,回到c语言时代,指针的概念. 什么是 ...
- 利用babel工具将es6语法转换成es5，Object.assign方法报错
一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...
- 多测师全方位面试题腾讯 _自动化面试题_高级讲师肖sir
作答注意:候选人可以两题都做,也可以两题任选一题做即可. 笔试题一:1.查询 https://www.newsmth.net/nForum/#!board/PieLove2.获取发贴时间是2020年8 ...
- 一入Java深似海
Java的基础语法 一个java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来写协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象: 对象是一个类的实例,有状态和行为.例如 ...
- day28 Pyhton 面向对象 继承
1.昨日回顾 类的命名空间 静态属性\动态属性(方法) 对象的命名空间 #对象的属性 #类指针:对象能够通过这个类指针找到类 #静态属性:属于类,多个对象共享这个资源 #尽量用类名来操作静态属性 #对 ...
- 为什么说 Python 内置函数并不是万能的？
本文出自"Python为什么"系列,请查看全部文章 在Python猫的上一篇文章中,我们对比了两种创建列表的方法,即字面量用法 [] 与内置类型用法 list(),进而分析出它们在 ...
- centos8平台:举例讲解redis6的ACL功能(redis6.0.1)
一,为什么redis6要增加acl功能模块? 什么是acl? 访问控制列表(ACL)是一种基于包过滤的访问控制技术, 它可以根据设定的条件对接口上的数据包进行过滤,允许其通过或丢弃 redis6增加了 ...