基於FullCalendar外掛的個人日程安排系統(4)
阿新 • • 發佈：2019-02-14
這一篇開始要用到FullCalendar外掛，由於我自己也是頭一次用，也不是很瞭解，所以只能簡單介紹一下，大家可以一起討論。
效果圖
customer_index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="mytag" uri="MyTag"%>
<!-- 這是一個自定義標籤，用於判斷使用者是否登入，若使用者沒有登入則將轉到登入介面 -->
<!-- 本來可以寫一個過濾器就可以簡單實現該功能而不需要像這樣到處寫 --> 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) {// 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"%>
<!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) { //當單擊日曆中的某一天時，觸發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<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, 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;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 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<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, {