基于FullCalendar插件的个人日程安排系统(4)
2024-06-16 18:06:41
这一篇开始要用到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的cookiedelCookie();layer.close(index);});
}
/*** @see 删除名为username的Cookie*/
function delCookie(){//通过ajax,发送一个请求给处理删除cookie的servlet//让servlet删除username这个cookievar url="deleteCookie";var xmlhttp, str;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {str = xmlhttp.responseText;if(str == "success"){//若成功删除，则调回到登录页面window.location.href="login.jsp";}}}xmlhttp.open("POST", url, false);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send();} poupview.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>弹出窗</title>
<link rel="stylesheet" type="text/css" href="../css/poupview.css" />
</head>
<body><div class="layer-hidden-line" id="poupview"><form role="form" class="m-t-form" id="Form"action="customer_index.jsp"onsubmit="return addItem()" method="post"><input name="id" id="id" type="hidden" value=""><div class="row"><div class="col-xs-12 layer-condensed-case"><div class="form-group"><label for="classroomId"> 日程内容 </label> <span
class="input-icon icon-left"> <input type="text"class="form-control" id="content" name="title"placeholder="请输入日程内容" data-required="true"data-descriptions="content" maxlength="50"> <i
class="spl-icon-book-open"> </i></span></div></div></div><div class="row"><div class="col-xs-12 layer-condensed-case"><div class="form-group"><label for="classroomId"> 开始时间 </label> <span
class="input-icon icon-left"> <span id="sDate"></span> <input
type="text" class="form-control date-picker-text" id="startTime"name="start" placeholder="请输入开始时间" data-required="true"data-descriptions="startTime" maxlength="50"> <i
class="spl-icon-book-open"> </i></span></div></div></div><div class="row" id="divEndTime"><div class="col-xs-12 layer-condensed-case"><div class="form-group"><label for="classroomId">结束时间</label> <span
class="input-icon icon-left"> <span id="eDate"></span> <input
type="text" class="date-picker-text form-control" id="endTime"name="end" placeholder="请输入结束时间" maxlength="50"> <i
class="spl-icon-book-open"> </i></span></div></div></div><div class="row" id="divEndTime"><div class="col-xs-12 layer-condensed-case"><div class="form-group"><label for="classroomId">提醒时间</label> <select class="form-control"id="remindTime"><option>30分钟前</option><option>1小时前</option><option>2小时前</option><option>3小时前</option></select></div></div></div><p id="addError"></p><div class="row margin-top-10" id="options"><input type="button" value="删 除"class="btn btn-danger btn-sm" id="del" onclick="deleteItem()" /> <input
type="button" value="确认修改" class="btn btn-warning btn-sm"id="modifyInf" onclick="mofifyItemInf()" /> <input type="button"value="完成事宜" class="btn btn-success btn-sm" id="finish"onclick="finishItem()" /> <input type="button" value="已完成"class="btn btn-warning btn-sm" id="modifyState"onclick="modifyItemState()" /> <input type="submit" id="submit"value="提 交" class="btn btn-primary btn-sm" /></div></form></div>
</body>
</html>myfullcalendar.js
$(function(){//初始化界面init();initFullCalendar();})
function init(){document.getElementById('getSchedule').style.fontSize="30px";}//页面加载完初始化日历
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();var addIndex;
//打开弹出层
function openLayer(date){//这个data是个Date对象var mydate = new Date();var hour = mydate.getHours();var minute = mydate.getMinutes();minute = minute>9?minute:"0"+minute;var eHour = hour+2;eHour = eHour<25?eHour:24;var second = mydate.getSeconds();second = second>9?second:"0"+second;var now = hour+":"+minute+":"+second;var e = eHour+":00:00";$('#id').val('');$("#content").val("");$("#del").hide();$("#modifyInf").hide();$("#finish").hide();$("#modifyState").hide();$("#submit").show();$('#addError').hide();var sTime = laydate.render({elem: '#startTime',type: 'time',value: now});var eTime = laydate.render({elem: '#endTime',type: 'time',value:e});$('#sDate').val(formatDate(date));$('#eDate').val(formatDate(date));addIndex=layer.open({title : '新增日程',type : 1,fix : false,skin : 'layui-layer-demo',// 加上边框area : [ '500px', '400px' ],// 宽高content : $('#Form')});}
//打开编辑弹出窗
function openEditLayer(data){$("#id").val(data.id);showOptions(data.color,data.id);$("#del").show();$('#Form')[0].reset();$('#endTimeChk').prop("checked",false);$('#content').val(data.title);$('#startTime').val(getDateTime(data.start));$('#endTime').val(getDateTime(data.end));$("#addError").hide();$('#sDate').val(formatDate(data.start));$('#eDate').val(formatDate(data.end));setRemindTime(data.id);var sTime = laydate.render({elem: '#startTime',type: 'time'});var eTime=laydate.render({elem: '#endTime',type: 'time'});addIndex=layer.open({title : '编辑日程',type : 1,fix : false,skin : 'layui-layer-rim',// 加上边框area : [ '500px', '420px' ],// 宽高content : $('#Form')});
}
//关闭弹出层
function closeLayer(){layer.close(addIndex);
}
//初始化日程视图
function initFullCalendar(){$('#calendar').fullCalendar({header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay',},//这里这么写是为了汉化，但是只能汉化这一个页面，彻底汉化我也不懂monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], buttonText:{today: '今天',month: '月',week: '周',day: '日',},// 本来日历上的日程是可以拖动的，但是要处理那些又要多很多事，所以我设置不能拖动editable: false,//不能拖动 firstDay:1,timeFormat: 'H:mm',axisFormat: 'H:mm',events:"getSchedule",dayClick: function(date, allDay, jsEvent, view) { //当单击日历中的某一天时，触发callbackopenLayer(date);},eventClick:function(event, jsEvent, view){//当点击日历中的某一日程（事件）时，触发此操作openEditLayer(event);},eventMouseover:function (event, jsEvent, view){//鼠标划过的事件console.log(event);},eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件console.log(event);}});
}
//进入下一个月视图
function next(){$('#calendar').fullCalendar('next');
}
//添加一项日程
function addItem(){var url = "addScheduleItem";var content = document.getElementById("content").value;var addError = document.getElementById("addError");var remindTime = $('#remindTime').val();var start = $('#sDate').val()+" "+$('#startTime').val();var end = $('#eDate').val()+" "+$('#endTime').val();var id = $('#id').val();var timestamp = Date.parse(new Date(start));var timestamp2 = Date.parse(new Date(end));timestamp = timestamp / 1000;timestamp2 = timestamp2 / 1000;remindTime = getRemindTime(remindTime);if(content == null || content ==''){addError.style.display = "block";addError.innerHTML ="请填入日程内容";return false;}else if(timestamp2<timestamp){addError.style.display = "block";addError.innerHTML = "结束时间必须晚于开始时间";return false;}if(submit(content,timestamp,timestamp2,remindTime,url,id)){closeLayer();layer.msg('成功添加事宜', {icon: 6,time: 10000 //2秒关闭（如果不配置，默认是3秒）}, function(){return true;}); }else{layer.msg('添加事宜失败', {icon: 5,time: 5000 //2秒关闭（如果不配置，默认是3秒）}, function(){return false;}); }
}
//获取提醒时间
function getRemindTime(remindTime){if(remindTime == "30分钟前"){return 60*30;}else if(remindTime == "1小时前"){return 60*60;}else if(remindTime == "2小时前"){return 60*60*2;}else{return 60*60*3;}
}
//提交
function submit(content,timestamp,timestamp2,remindTime,url,id){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.open("POST",url,false);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");xmlhttp.send("content="+content+"&start="+timestamp+"&end="+timestamp2+"&remindTime="+remindTime+"&id="+id);if (xmlhttp.readyState==4 && xmlhttp.status==200){ if(xmlhttp.responseText=="success"){ return true; }}
}//将一个Date对象转为一个字符串
function formatDate(date){var mydate = new Date(date);var y = mydate.getFullYear();var month = mydate.getMonth()+1;var day = mydate.getDate();var hour = mydate.getHours();var minute = mydate.getMinutes();minute = minute>9?minute:"0"+minute;var second = mydate.getSeconds();second = second>9?second:"0"+second;var selecteddate = y+"-"+month+"-"+day;return selecteddate;
}
//将一个Date对象转为一个字符串
function getDateTime(date){var mydate = new Date(date);var hour = mydate.getHours();hour -=8;hour = hour<0?hour+24:hour;var minute = mydate.getMinutes();minute = minute>9?minute:"0"+minute;var second = mydate.getSeconds();second = second>9?second:"0"+second;var now = hour+":"+minute+":"+second;return now;
}
//通过AJAX从后端获取数据
function getJsonData(url) {var xmlhttp, str;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {str = xmlhttp.responseText;}}xmlhttp.open("POST", url, false);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");xmlhttp.send();if (str != null) {var usersJson = eval('(' + str + ')');return usersJson;}
}
//获取一项日程的ID
function getItemById(id){var schedule = getJsonData("getSchedule");for(var i=0;i<schedule.length;i++){if(schedule[i].id == id){return schedule[i];}}
}
//设置提醒时间
function setRemindTime(id){var schedule = getJsonData("getSchedule");for(var i=0;i<schedule.length;i++){if(schedule[i].id == id){var remind;var remindTime = schedule[i].remindTime;if(remindTime == 1800){remind = "30分钟前";}else if(remindTime == 3600){remind = "1小时前";}else if(remindTime == 7200){remind = "2小时前";}else{remind = "3小时前";}$('#remindTime').val(remind);}}
}
//显示选项，不同状态的日程显示的选项也不同
function showOptions(color,id){var scheduleItem = getItemById(id);if(color == "yellow"){$("#del").show();$("#submit").hide();$("#modifyInf").show();$("#finish").hide();$("#modifyState").hide();}else if(color == "green"){
// document.getElementById("reset").style.display = "none";$("#del").show();$("#submit").hide();$("#modifyInf").hide();$("#finish").hide();$("#modifyState").hide();}else if(color == "gray"){$("#del").show();$("#submit").hide();$("#modifyInf").hide();$("#finish").hide();$("#modifyState").show();}else{$("#del").show();$("#submit").hide();$("#modifyInf").show();$("#finish").show();$("#modifyState").hide();}
}
//删除一项日程
function deleteItem(){layer.confirm('确认删除该事宜?', {icon: 3, title:'提示'}, function(index){//do somethingvar url = "deleteItem";var id = $('#id').val();if(submit(null,null,null,null,url,id)){closeLayer();window.location.href="customer_index.jsp";layer.msg('成功删除事宜', {icon: 6,time: 2000 //2秒关闭（如果不配置，默认是3秒）}, function(){}); }else{closeLayer();layer.msg('删除事宜失败', {icon: 5,time: 3000 //2秒关闭（如果不配置，默认是3秒）}, function(){initFullCalendar();}); }});}
//修改一项日程信息
function mofifyItemInf(){var url = "updateItem";var content = document.getElementById("content").value;var addError = document.getElementById("addError");var remindTime = $('#remindTime').val();var start = $('#sDate').val()+" "+$('#startTime').val();var end = $('#eDate').val()+" "+$('#endTime').val();var id = $('#id').val();var timestamp = Date.parse(new Date(start));var timestamp2 = Date.parse(new Date(end));timestamp = timestamp / 1000;timestamp2 = timestamp2 / 1000;remindTime = getRemindTime(remindTime);if(content == null || content ==''){addError.style.display = "block";addError.innerHTML ="请填入日程内容";return false;}else if(timestamp2<timestamp){addError.style.display = "block";addError.innerHTML = "结束时间必须晚于开始时间";return false;}if(submit(content,timestamp,timestamp2,remindTime,url,id)){closeLayer();window.location.href="customer_index.jsp";layer.msg('成功修改事宜', {icon: 6,time: 2000 //2秒关闭（如果不配置，默认是3秒）}, function(){}); }else{layer.msg('修改事宜失败', {icon: 5,time: 5000 //2秒关闭（如果不配置，默认是3秒）}, function(){initFullCalendar();}); }
}
//完成一项日程
function finishItem(){var success = "完成事宜";var fail = "完成事宜失败";finishAndModify(success,fail);
}
//修改一项日程
function modifyItemState(){var success = "成功修改事宜";var fail = "修改事宜失败";finishAndModify(success,fail);
}
//完成或者修改一项日程
function finishAndModify(success,fail){layer.confirm('确认已经完成该事宜?', {icon: 3, title:'提示'}, function(index){var url = "changeItemState";var id = $('#id').val();if(submit(null,null,null,null,url,id)){closeLayer();window.location.href="customer_index.jsp";layer.msg(success, {icon: 6,time: 5000 //2秒关闭（如果不配置，默认是3秒）}, function(){}); }else{closeLayer();layer.close(index);layer.msg(fail, {icon: 5,time: 3000 //2秒关闭（如果不配置，默认是3秒）}, function(){initFullCalendar();}); }});
}这里有点复杂，一两句话也将不清，大家有疑惑的地方可以讨论。
基于FullCalendar插件的个人日程安排系统(4)相关推荐
- php周计划表_PHPOA日程安排系统，建立井然有序的工作计划
原标题:PHPOA日程安排系统,建立井然有序的工作计划 生活需要仪式感,工作也同样需要!生活需要精打细算,工作也需要做出每日计划.每天被周而复始的工作压得透不过气来,那一定是计划没提前做好.如何让工作 ...
- 基于FullCalendar插件的简单个人日程安排系统(3)
(这里的代码有点多不过都不是特别复杂,慢慢看,O(∩_∩)O哈哈~) LoginServlet.java package cn.javaee.controller;import java.io.IOE ...
- js 排班插件_JS实现日程安排 日程安排插件
代码: 员工周计划 body { margin: 0; padding: 0; font-size: 12px; color: #555; background-color: #fff; } .tab ...
- python项目源码 日程管理_基于fullcalendar制作的日程管理小demo
一.项目地址: 二.项目功能概述: 该项目是基于fullcalendar而制作的日程管理,fullcalendar是一个基于jquery的日历插件,在该项目中,我们可以在日历上编辑我们的日程,并将日程 ...
- FullCalendar 一： 日程安排FullCalendar
FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排.工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介 ...
- vue日程安排_使用Fullcalendar管理时间计划调度安排
原标题:使用Fullcalendar管理时间计划调度安排 Fullcalendar可以很好的管理日程安排事件,可以管理时间和任务调度,比如日常值班岗位安排.举办活动会议议程安排.项目行动安排.车间劳动 ...
- Vue中使用Fullcalendar日历开发日程安排
效果图: 官方文档地址:Vue Component - Docs | FullCalendar 1.安装与FullCalendar相关的依赖项 npm install --save @fullcale ...
- win7系统下比较好用的桌面日程安排提醒软件是什么？
win7系统下比较好用的桌面日程安排提醒软件是什么? win7系统的电脑上可以将便笺添加到桌面,用来记录待办事项.安排任务清单,虽然系统便笺能起到日程安排的作用,但是却不能进行直观的日程提醒.win7 ...
- android 调用系统行程,-基于Android的行程安排系统的设计与实现（整理版）.doc
基于Android的行程安排系统 摘 要 现代大学生的课程越来越多,而且每个班级门同一门每天课程的时间和教室都不固定,给学生的上课带来了一定的麻烦,于是"基于Android的行程安排系统&q ...
最新文章
- 一文看懂人脸识别（4个特点+4个实现步骤+5个难点+算法发展轨迹）
- layDate的使用
- vue 判断页面加载完成_vue项目搭建及总结
- cas后端返回html直接跳转,CAS验证成功后不能跳转到登陆成功的主页面解决办法...
- dedeCMS版权信息、备案号的调用代码 - 代码大全
- Windows Azure Cloud Service (41) 修改云服务IIS托管管道模式为4.0经典模式
- 2.Linux性能诊断 --- 单机负载评估
- 看完这篇文章就知道为什么要使用 Node.js啦！
- 对联广告html,Js对联广告代码示例(入门)
- HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码
- 弘辽科技：淘宝四月份有满减活动吗？淘宝每个月都会有满减活动吗
- .Net获取公司所有员工前一天钉钉考勤记录
- Mac Android Studio 打包APK 出现的问题
- 自媒体这样运营想不成功都难！
- c语言 do while 素数,c语言题目：用while语句求2000以内所有质数（素数）
- Adobe的视频和音频编码和格式转换软件Media Encoder(Me) 2023版本下载与安装教程
- 2020阿里实习生校招笔试题
- DNS中继服务器研究
- [硫化铂]treecnt
- git连接远程仓库以及常用命令
热门文章
- Revit二次开发-资源汇总（书籍、网站、案例...）
- QQ机器人OPQBot
- java容器：1、java中容器有哪些？
- Leetcode-111 二叉树的最小深度（递归）
- 2012年1月凯立德地图普高清全分辨率懒人包P1750-D5616-2721J09（完美破解，已上路实测，永久下载地址）...
- 360“隔离沙箱”强劲升级：运行软件不中毒
- 大华摄像头webplugin.exe插件开发（需要设置固定IP地址，端口号）
- Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
- 利用js结合canvas给图片打马赛克
- springboot福佳生活超市进销存管理系统毕业设计源码261620