fullcalendar日曆外掛的使用並實現增刪改查

阿新 • • 發佈：2019-07-09

1、剛進去預設顯示當前月份，查出資料庫的資料並展示，今天是2018年1月19號，所以我給上過的課次顏色變為灰色，而沒上過的課次變為橙色

2、點選特定的日期，新增課次：

點選未上過的課次進行編輯或刪除：

以及課次的拖動，如將1月22號的“08:00-09:00 高數一班”拖動到1月29號：

下面我來說一下我是怎麼實現的

首先需要匯入必須的css和js：

<script src='

../../../../static/fullcalendar/js/jquery.min.js'></script>

'></script>

在頁面中我還使用了bootstrap和layer，所有我還匯入了：

./bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

還會用到一些公用的js方法對時間格式做轉化：

Date.prototype.Format = function(format){

var o = {

"M+" : this.getMonth()+1, //month

"d+" : this.getDate(), //day

"h+" : this.getHours(), //hour

"m+" : this.getMinutes(), //minute

"s+" : this.getSeconds(), //second

"q+" : Math.floor((this.getMonth()+3)/3), //quarter

"S" : this.getMilliseconds() //millisecond

};

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 getDate(DBTime){
var date = new Date(DBTime);
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var dateStr;
if(month<10&&day<10){
dateStr = year+"-0"+month+"-0"+day;
}else if(month<10&&day>=10){
dateStr = year+"-0"+month+"-"+day;
}else if(month>=10&&day<10){
dateStr = year+"-"+month+"-0"+day;
}else if(month>=10&&day>=10){
dateStr = year+"-"+month+"-"+day;
}
return dateStr;
}
//將資料庫的時間戳轉成 *時*分字串
function getTime(DBTime){
var time = DBTime.substring(0,2)+"-"+DBTime.substring(3,5);
return time;
}

然後就是初始化FullCalendar：

下面這些程式碼建議在document。ready中寫，在頁面初始化的時候就載入執行

$('#calendar').fullCalendar({
//設定頭部資訊，如果不想顯示，可以設定header為false
header: {
//日曆頭部左邊：初始化切換按鈕
left: '',
//日曆頭部中間：顯示當前日期資訊
center: 'title',
//日曆頭部右邊：初始化檢視
right: 'prev,next today'
},
//月檢視下日曆格子寬度和高度的比例
aspectRatio: 1.35,
//月檢視的顯示模式，fixed：固定顯示6周高；liquid：高度隨週數變化；variable: 高度固定
weekMode: 'liquid',
//初始化時的預設檢視，month、agendaWeek、agendaDay
defaultView: 'month',
//agenda檢視下是否顯示all-day
allDaySlot: true,
//agenda檢視下all-day的顯示文字
allDayText: '全天',
//agenda檢視下兩個相鄰時間之間的間隔
slotMinutes: 30,
//區分工作時間
businessHours: true,
//非all-day時，如果沒有指定結束時間，預設執行120分鐘
defaultEventMinutes: 60,
//設定為true時，如果資料過多超過日曆格子顯示的高度時，多出去的資料不會將格子擠開，而是顯示為 +...more ，點選後才會完整顯示所有的資料
eventLimit: true,
//設定是否顯示週六和週日，設為false則不顯示
weekends: true,
//日曆初始化時顯示的日期，月檢視顯示該月，周檢視顯示該周，日檢視顯示該天，和當前日期沒有關係
//defaultDate: '2016-08-11',
//設定是否可被單擊或者拖動選擇
selectable: true,
//點選或者拖動選擇時，是否顯示時間範圍的提示資訊，該屬性只在agenda視圖裡可用
selectHelper: true,
//點選或者拖動選中之後，點選日曆外的空白區域是否取消選中狀態 true為取消 false為不取消，只有重新選擇時才會取消
unselectAuto: true,
//Event是否可被拖動或者拖拽
editable: true,
//Event被拖動時的不透明度
dragOpacity: 0.5,
//日程資料
events:
function(start,end,timezone,callback){
var className = $("#keyword").val();//該keyword是頁面搜尋框要查詢的班級名稱
var date = new Date();
var nowDate = date.Format("yyyyMMdd");
var nowTime = date.Format("hhmmss");
$.ajax({//通過ajax動態查詢要展示的課次資料資訊
url: '後臺controller中查詢的路徑',
data : {
"className": className,
},
dataType: 'json',
type : 'post',
success: function(result) { // 獲取當前月的資料
var events = [];
if(result.body.wesClassCourseList!=null){//result.body.wesClassCourseList其實就是從後臺返回前臺的一個課次list，

var len = result.body.wesClassCourseList.length;
var wesClassCourseList=result.body.wesClassCourseList;
var wesClassList=result.body.wesClassList;//result.body.wesClassList其實就是從後臺返回前臺的一個班級list，每一個課次都一一對應每一個班級，也就是說result.body.wesClassCourseList的長度和result.body.wesClassList的長度是一樣的
for(var i=0;i<len;i++){
var classCourseDate=getDate(wesClassCourseList[i].classCourseDate);//通過getDate方法將日期格式進行轉化
var ccDate = classCourseDate.replace(/\-/g,"");//去掉日期格式中的“-”
var classCourseTime=getTime(wesClassCourseList[i].classCourseTime);//通過getTime方法將時間格式進行轉化
var ccTime = classCourseTime.replace(/\-/g,"");//去掉時間格式中的“-”
var wesClass = wesClassList[i].status;
if((ccDate>nowDate||(ccDate==nowDate&&ccTime>nowTime))&&wesClass==false){
events.push({
id:wesClassCourseList[i].classCourseId+","+wesClassCourseList[i].classId,//這裡我是將班級課次Id和班級Id一起作為fullcalendar中event事件的Id
title: wesClassCourseList[i].classCourseTime+" "+wesClassList[i].name,//title我顯示的是每一個課次的上下課時間和班級名稱
start: classCourseDate,//start表示這個event事件放在哪個日期框中
color: 'red',//設定event的背景顏色，若該課次還沒上且該班級已經刪除則顯示為紅色
});
}else if((ccDate>nowDate||(ccDate==nowDate&&ccTime>nowTime))&&wesClass==true){
events.push({
id:wesClassCourseList[i].classCourseId+","+wesClassCourseList[i].classId,
title: wesClassCourseList[i].classCourseTime+" "+wesClassList[i].name,
start: classCourseDate,
color: '#ff9f2c',//若該課次還沒上且該班級沒被刪除則顯示為紅色
});
}
else{
events.push({
id:wesClassCourseList[i].classCourseId+","+wesClassCourseList[i].classId,
title: wesClassCourseList[i].classCourseTime+" "+wesClassList[i].name,
start: classCourseDate,
color: 'gray',//若該課次已經上過則顯示為灰色
});
}
}
}
callback(events);
}
});
},

//新增事件
dayClick : function(date, allDay, jsEvent, view ) {
var classCourseDate=date.format();//選擇的日期
var ccDate = classCourseDate.replace(/\-/g,"");
var date = new Date();
var nowDate = date.Format("yyyyMMdd");
var nowTime = date.Format("hhmmss");
var nowClassCourseDate = getDate(classCourseDate).replace(/\-/g,"");
if(ccDate<nowDate){
return;
}
$("#startTimeAdd").val("");
$("#endTimeAdd").val("");
//ajax獲取班級資訊，並展示新增框
$.ajax({
url: '後臺controller層查詢班級資訊的路徑',//因為點選日曆某個特定日期時，彈出框需要以下拉框的形式顯示班級資訊
dataType: 'json',
type : 'post',
success: function(result){ // 獲取當前月的資料
var len = result.body.wesClassList.length;
var teacherClassInfo=result.body.wesClassList;
str="";
$("#classListInfoAdd").empty();
//迴圈取教師所帶班級
str +='<select id="classIdAdd" style="width: 60%;height:30px; padding-left:4px; padding-top:0px;padding-bottom:0px; line-height:30px; color: grey" >';
str +='<option value="0">請選擇</option>';
for(var i=0;i<len;i++){
str +='<option value="'+teacherClassInfo[i].classId+'">'+teacherClassInfo[i].name+'</option>';
}
str +='</select>';
$("#classListInfoAdd").append(str);//班級下拉框賦值
$("#addObjcectInputModalAdd").modal("show");//顯示彈出框
}
});

//編輯事件

eventClick : function( event ){

//儲存修改內容

var classCourseTime=startTimeEdit+"-"+endTimeEdit;//開始結束時間段
var updateEditBtn=document.getElementById('updateEdit');
updateEditBtn.onclick=function(){

$.ajax({
url: '儲存編輯內容的後臺路徑',
data : {
classCourseId : classCourseId,
classId : classId,
classCourseTime : classCourseTime,
classCourseDate : classCourseDate,
},
dataType: 'json',
type : 'post',
success: function(result) { // 獲取當前月的資料
if (result.success) {
$('#calendar'). fullCalendar ( 'refetchEvents' );
$("#addObjcectInputModalEdit").modal("hide");//隱藏彈出框
}
}

}

//刪除
var deleEditBtn=document.getElementById('deleEdit');
deleEditBtn.onclick=function(){
layer.confirm('是否確認刪除？', {closeBtn: 0, icon : 3 ,skin : 'layui-layer-red',btn: ['確認','取消'] //按鈕
}, function(){
$.ajax({
url: '路徑',
data : {
classCourseId : classCourseId,
},
dataType: 'json',
type : 'post',
success: function(result) { // 獲取當前月的資料
if (result.success) {
$('#calendar').fullCalendar( 'removeEvents' ,[ id ]),//刪除當前日程
$("#addObjcectInputModalEdit").modal("hide");//隱藏彈出框
layer.closeAll('dialog');//隱藏訊息提示框
}
}
});
});
};

//取消
var cancelEditBtn=document.getElementById('cancelEdit');
cancelEditBtn.onclick=function(){
$("#addObjcectInputModalEdit").modal("hide");//隱藏彈出框
};

//拖動事件

eventDrop : function( event, dayDelta, revertFunc ) {
var color = event.color;
if(color=='gray'){
layer.alert("已上課和已關閉的班級課次不能被拖動修改！", {skin:'layui-layer-red',closeBtn:0,icon:2});
revertFunc(); //恢復原狀
return;
}

var id=event.id;
var classId=id.split(",")[1];
var title= event.title;
var startTimeEdit=(title.split(" ")[0]).split("-")[0];
var endTimeEdit=(title.split(" ")[0]).split("-")[1];
var classCourseDate=getDate(event.start);
var startTimeEditString = startTimeEdit.replace(/\:/g,"");
var endTimeEditString = endTimeEdit.replace(/\:/g,"");
var classCourseId=id.split(",")[0];

$.ajax({
url: '儲存修改資訊的後臺路徑',
data : {
classCourseId : classCourseId,
classCourseDate : classCourseDate,
},
dataType: 'json',
type : 'post',
success: function(result) { // 獲取當前月的資料
if (result.success) {
$('#calendar'). fullCalendar ( 'refetchEvents' );
$("#addObjcectInputModalEdit").modal("hide");//隱藏彈出框
}
}
});

$("#search").click(function(){//當點選搜尋按鈕時頁面重新重新整理，日曆重新初始化
$('#calendar'). fullCalendar ( 'refetchEvents' );
});

//我的新增課次、編輯刪除課次彈出框是在body中寫的：

//新增課次彈出框程式碼：

//編輯刪除課次彈出框程式碼：

<div class="modal fade" id="addObjcectInputModalEdit" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content" style="width: 45%;border:1px solid;margin: 42%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title"><i class="fa fa-info-circle"></i>編輯課程</h4>
</div>
<div class="modal-body">
<div class="form-group" style="margin: 2px; margin-bottom: 20px">
<div class="input-group" style="width:100%;line-height: 3; ">
<p>
選擇班級：<span id="classListInfoEdit"></span>
</p>
<p>
開始時間：<input type="time" id="startTimeEdit" />
</p>
<p>
結束時間：<input type="time" id="endTimeEdit" />
</p>
<p>
<input type="button" class="btn btn-xs btn-secondary" id="cancelEdit" value="取消">
<input type="button" class="btn btn-xs btn-success" id="updateEdit" value="修改">
<input type="button" class="btn btn-xs btn-danger" id="deleEdit" value="刪除">
</p>
</div>
</div>

</div>
</div>
</div

fullcalendar日曆外掛的使用並實現增刪改查

fullcalendar日曆外掛的使用並實現增刪改查

sql server連線oracle並實現增刪改查

Java操作Oracle並實現增刪改查

MyEclipse搭建SSH並實現增刪改查

springmvc配置myBatis，並實現增刪改查、分頁功能

複習：JDBC工具類並實現增刪改查

unity網路實戰開發（叢林戰爭）-前期知識準備（011-c#連線資料庫並實現增刪改查以及sql注入問題）

建立SQLite資料庫並實現增刪改查

利用JDBC連線MySQL資料庫並實現增刪改查的程式碼示例

資料結構：java建立串並實現增刪改查功能

SSM框架搭建（Spring+SpringMVC+MyBatis）與easyui整合並實現增刪改查實現

java連接Oracle數據庫實現增刪改查並在Navicat中顯示

使用springmvc+mybatis實現增刪改查並進行登入註冊功能

Java通過JDBC連線資料庫的三種方式！！！並對資料庫實現增刪改查

java連線Oracle並實用儲存過程實現增刪改查(CRUD)

修改Haproxy文件配置，實現增刪改查

[python] 用pickle模塊實現“增刪改查”的簡易功能

.NET EF 框架-實現增刪改查

作業員工信息表實現增刪改查操作

python操作mysql數據庫實現增刪改查

fullcalendar日曆外掛的使用並實現增刪改查

相關推薦