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

继续阅读

【Vue】 element ui 引入第三方图标

Java前端—定时跳转-jsp

JQuery（选择器，DOM操作，事件，Ajax）JQuery

上传、下载文件以及发送邮件

学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册（POST方式）

LayUI使用formSelects-v4做复选下拉框

javaweb上传文件

一文看懂jsp

前台上传七牛云

JSP中捕捉动态循环创建的表格行的事件

jsp通过url传值到servlet

弹出子修改页面

AnjularJs数据一直显示不出来？

JSP指令标签JSP标签

博客markdown编辑器集成步骤博客markdown编辑器集成步骤

提供图片下载接口