基于FullCalendar插件的个人日程安排系统(4)

最新推荐文章于 2024-06-02 20:45:59 发布

MarhongBaLa

最新推荐文章于 2024-06-02 20:45:59 发布

阅读量4k

点赞数 1

分类专栏： jsp 文章标签：插件

本文链接：https://blog.csdn.net/MarhongBaLa/article/details/78643810

版权

这一篇开始要用到FullCalendar插件，由于我自己也是头一次用，也不是很了解，所以只能简单介绍一下，大家可以一起讨论。

效果图

具体效果图

customer_index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="mytag" uri="MyTag"%>
<!-- 这是一个自定义标签，用于判断用户是否登录，若用户没有登录则将转到登录界面 -->
<!-- 本来可以写一个过滤器就可以简单实现该功能而不需要像这样到处写 -->
<!-- 但是由于种种原因还是这么干了，虽然我也觉得有点傻 -->
<mytag:SecondTag />
<!DOCTYPE>
<html>
<head>
<title>我的日程</title>
<link href='../css/customer_index.css' rel='stylesheet' type="text/css" />

<!-- 这几个文件:fullcalendar.min.css、fullcalendar.print.min.css、moment.min.js、jquery.min.js、fullcalendar.min.js就是我们需要引入的文件了 -->
<link href='../css/fullcalendar.min.css' rel='stylesheet'
    type="text/css" />
<link href='../css/fullcalendar.print.min.css' rel='stylesheet'
    media='print' type="text/css" />
<script src='../js/moment.min.js'></script>
<script src='../js/jquery.min.js'></script>
<script src='../js/fullcalendar.min.js'></script>

<!-- 注意这个文件:myfullcalendar.js，这是处理整个系统的业务逻辑的核心文件 -->
<script src="../js/myfullcalendar.js"></script>

<!-- 至于这些:layer-v3.1.0、layDate-v5.0.85、bootstrap.min.css，都是UI框架，可以自己去网上搜索了解更多 -->
<script src="../layer-v3.1.0/layer/layer.js"></script>
<script src="../layDate-v5.0.85/laydate/laydate.js"></script>
<link href='../css/bootstrap.min.css' rel='stylesheet' type="text/css" />
</head>
<body>
    <!--    引入公共头部 -->
    <div>
        <jsp:include page="banner.jsp" />

    </div>
    <!--    展示日历的div -->
    <div id="calendar"></div>

<!--    弹出窗 -->
    <jsp:include page="poupview.jsp"></jsp:include>

    <!--    引入公共底部 -->
    <div id="footer">
        <jsp:include page="footer.jsp" />
    </div>
</body>
</html>

banner.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="mytag" uri="MyTag"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>公共头部</title>
<link href='../css/bootstrap.min.css' rel='stylesheet' type="text/css" />

</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="customer_index.jsp" id="getSchedule"><span
                id="username"><mytag:ThirdTag /></span>的日程</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="query.jsp" id="querySchedule">查询日程</a></li>
                <li><a href="#" id="exit" onclick="exit()">退出</a></li>

            </ul>
        </div>
    </div>
    </nav>

    <script src="../js/banner.js"></script>
</body>
</html>

banner.js

/**
 * @see 用户处理banner.jsp
 * @author wangbin
 * @time 2017-11-18 15:37:20
 */
/**
 * @see 处理用户退出系统
 */
function exit(){
    layer.confirm('确认退出?', {icon: 3, title:'提示'}, function(index){
          //若用户确定退出系统则删除名为username的cookie
         delCookie();
        layer.close(index);
        });
}
/**
 * @see 删除名为username的Cookie
 */
function delCookie(){
    //通过ajax,发送一个请求给处理删除cookie的servlet
    //让servlet删除username这个cookie
        var url="deleteCookie";
        var xmlhttp, str;
        if (window.XMLHttpRequest) {