fullcalendar日历插件的使用并动态增删改查

我上个项目是做了一个关于教育方面的web端页面，其中的课程表就要用到fullcalendar日历插件，刚开始也是不会用，因为以前也没用过，后面也是看官方文档，问同事，最后完成了这个课程表，个人感觉fullcalendar这个日历插件功能很强大！下面我来附上几张图片：

1、刚进去默认显示当前月份，查出数据库的数据并展示，今天是2018年1月19号，所以我给上过的课次颜色变为灰色，而没上过的课次变为橙色：

2、点击特定的日期，添加课次：

点击未上过的课次进行编辑或删除：

以及课次的拖动，如将1月22号的“08:00-09:00 高数一班”拖动到1月29号：

下面我来说一下我是怎么实现的

首先需要导入必须的css和js：

在页面中我还使用了bootstrap和layer，所有我还导入了：

还会用到一些公用的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，

//添加事件
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 id=event.id;
var classCourseId=id.split(",")[0];
var classId=id.split(",")[1];
var firstClassId = classId;
var title= event.title;
var startTimeEdit=(title.split(" ")[0]).split("-")[0];
var endTimeEdit=(title.split(" ")[0]).split("-")[1];
var classCourseDate=getDate(event.start);

$.ajax({
url: '查询所有班级信息的路径，弹出框要以下拉框的形式显示',
dataType: 'json',
type : 'post',
success: function(result){ // 获取当前月的数据
var len = result.body.wesClassList.length;
var teacherClassInfo=result.body.wesClassList;
str="";
$("#classListInfoEdit").empty();
//循环取教师所带班级
str +='<select id="classIdEdit" style="width: 60%;height:30px; padding-left:4px; padding-top:0px;padding-bottom:0px; line-height:30px >';
str +='<option value="0">请选择</option>';
for(var i=0;i<len;i++){
if(teacherClassInfo[i].classId==classId){
str +='<option value="'+teacherClassInfo[i].classId+'" selected = "selected" >'+teacherClassInfo[i].name+'</option>';
}else{
str +='<option value="'+teacherClassInfo[i].classId+'" >'+teacherClassInfo[i].name+'</option>';
}
}
str +='</select>';
$("#classListInfoEdit").append(str);//班级下拉框赋值
$("#startTimeEdit").val(startTimeEdit);
$("#endTimeEdit").val(endTimeEdit);
$("#addObjcectInputModalEdit").modal("show");//显示弹出框
}
});

//保存修改内容

var classCourseTime=startTimeEdit+"-"+endTimeEdit;//开始结束时间段
var updateEditBtn=document.getElementById('updateEdit');
updateEditBtn.οnclick=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.οnclick=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.οnclick=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>
</div>

//编辑删除课次弹出框代码：

</div>
</div>
</div>
</div>

转载于:https://www.cnblogs.com/gaopengfirst/p/8317723.html

fullcalendar日历插件的使用并动态增删改查相关推荐

fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证.
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证. 一.显示页面新建一个登录页面,即login.jsp <%--Created by In ...
实现ztree结合jquery的smartMenu.js插件对目录树的增删改查
问题:项目上遇到一个问题,需要作出一个目录树显示相关内容的层级结构关系. 插件: 目录树插件,在这里我选用了ztree,十分方便好用(UI有待提升哈~)下方是ztree插件需要的自取 ztree插件 ...
quartz动态增删改查
四.略微复杂的quartz的使用:动态添加修改定时任务设想一个项目场景: 在一个项目中,我需要动态的向项目中添加或者修改定时任务,还有暂停和启动的操作,相当于动态的添加定时任务,如果有这种需求的话 ...
java定时任务增删改查_实现Quartz的动态增删改查
1. Maven依赖 org.quartz-scheduler quartz 2.2.1 org.quartz-scheduler quartz-jobs 2.2.1 2. 业务处理类: import ...
iOS开发-plist文件增删改查
plist第一次看到这个后缀名文件的时候感觉怪怪的,不过接触久了也就习以为常了,plist是Property List的简称可以理解成属性列表文件,主要用来存储串行化后的对象的文件.扩展名为.plis ...
java显示日历插件_JavaWeb项目FullCalendar日历插件使用的示例代码
本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件生成日历主界面 FullC ...
FullCalendar 二：FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

fullcalendar日历插件的使用并动态增删改查

fullcalendar日历插件的使用并动态增删改查相关推荐

最新文章

热门文章