基于FullCalendar插件的个人日程安排系统(4)
这一篇开始要用到FullCalendar插件，由于我自己也是头一次用，也不是很了解，所以只能简单介绍一下，大家可以一起讨论。
效果图
customer_index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="mytag" uri="MyTag"%>
<mytag:SecondTag />
<html>
<head>
<title>我的日程title>
<link href='../css/customer_index.css' rel='stylesheet' type="text/css" />
<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>
<script src="../js/myfullcalendar.js">script>
<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 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"%>
<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) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = 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"%>
<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) { //当单击日历中的某一天时，触发callback
openLayer(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"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, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=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, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = 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;iif(schedule[i].id == id){
return schedule[i];
}
}
}
//设置提醒时间
function setRemindTime(id){
var schedule = getJsonData("getSchedule");
for(var i=0;iif(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 something
var 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"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();
});
}
});
} 这里有点复杂，一两句话也将不清，大家有疑惑的地方可以讨论。