fullCalendar插件的使用简单教程
转载请标明出处：
原文首发于： http://www.zhangruibin.com
本文出自 RebornChang的博客
厚颜打广告
亲，博主的微信公众号
‘程序员小圈圈’开始持续更新了哟~~
关注公众号回复 fullCalendar 或者 full 即可获取下载链接自行下载呦，省的等博主手动发送哟~~
还能不公开邮箱哟~~
长按图片识别二维码或者微信扫描二维码或者直接搜索名字 ‘CXYXQQ’ 即可关注本公众号哟~~
不只是有技术哟~~
还可以学下教育知识以及消遣娱乐哟~~
求关注哟~~
有好的文章可以联系投稿哟~
（追加于：2019-08-16）)
正文开始
最近项目中想实现一个基于日历的事件提醒,百度众多资源后选定使用fullCalendar进行实现,那首先来说下fullCalendar的官网:https://fullcalendar.io/在这上面有简单的demo以及API,但是是英文的,那么英文不太好的朋友可以选择翻译或者来看这个中文版的API:http://www.jb51.net/article/104841.htm,相对于官网的API,这个翻译的中文版有些简陋,但是基本的功能之类的也都能实现,模糊的地方直接去官网找相应的API查询编写就好了.
本文中使用的是jquery-1.4.2.min.js,所以在博主想使用layer.js进行弹出事件的控制,但是查阅下,JQuery1.8版本及以上的才支持,故…没用成,等有时间了调下UI试试,那么接下来…代码走起.
首先引入相关的js,以及css文件:
Title
其中主要的是关于fullcalendar以及validationEngine,的文件,部分调用jquery-1.4.2.min.js,UI用的是JQueryUI.那么接下来说下部分代码片的使用:
首先是日历的初始化,声明日历位置,然后对其进行初始化,因为我建立的日历事件是由开始时间,结束时间,事件类型,创建人,重复周数,标题,内容等字段组成,所以在进行日历的表层展示数据的时候进行展示的只有:创建人,标题,以及事件类型:
下面是效果图
$('#calendar').fullCalendar({
header:{
right: 'prev,next today',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
theme: true,
editable: true,
allDaySlot : false,
eventLimit: true,
events: function(start, end , callback){
var now = new Date();
//初始化参数
var name = "songyuan";
var title = "";
var content = "";
var noteType = "";
//alert("进入到查询日程的方法里.内部")
$.ajax({
type : "post",
url : "${ctx}/memo/getNotepad",
success : function(data) {
var events = [];
//alert("进入到events内部")
$.each(data,function (key,value) {
var noteType ="";
if (value.noteType==1){
noteType = "工作";
}else if (value.noteType==2){
noteType = "生活";
}else if (value.noteType==3){
noteType = "家庭";
}else if (value.noteType==4){
noteType = "私密";
}else {
noteType = "其他";
}
events.push({
sid: 2,
uid: 3,
title: '记事簿',
start: value.starTime,
end: value.endTime,
fullname: value.name,
confname: noteType,
confshortname: 'M1',
confcolor: '#ff3f3f',
confid: value.noteType,
allDay: false,
topic: value.title,
description : value.content,
id: value.id,
});
});
callback(events);
}
});
},
dayClick: function(date, allDay, jsEvent, view) {
var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
$( "#reservebox" ).dialog({
autoOpen: false,
height: 450,
width: 400,
title: '建立记事簿 ' + selectdate,
modal: true,
position: "center",
draggable: false,
beforeClose: function(event, ui) {
$.validationEngine.closePrompt("#thingsType");
$.validationEngine.closePrompt("#start");
$.validationEngine.closePrompt("#end");
},
buttons: {
"取消": function() {
$( this ).dialog( "close" );
},
"添加": function() {
// alert("这就是点击了reserve的方法")
/* if($("#reserveformID").validationEngine({returnIsValid:true})){*/
var startdatestr = $("#start").val();
var enddatestr = $("#end").val();
var confid = $("#thingsType").val();
var repweeks = $("#repweeks").val();
if(repweeks==null){
repweeks=0;
}
var startdate = $.fullCalendar.parseDate(selectdate+"T"+startdatestr);
var enddate = $.fullCalendar.parseDate(selectdate+"T"+enddatestr);
var schdata = {startdate:startdate, enddate:enddate, confid:confid, repweeks:repweeks};
var title = $("#title").val();
var content = $("#details").val();
/*}*/
//alert("startdatestr=="+startdatestr+"enddatestr=="+enddatestr+"enddatestr=="+enddatestr+"confid=="+confid+"repweeks=="+repweeks+"startdate=="+startdate+"enddate=="+enddate+"schdata=="+schdata)
$.ajax({
type : "post",
data :{
title : title,
content : content,
starTime : selectdate+" "+startdatestr+":00",
endTime : selectdate+" "+enddatestr+":00",
repeatWeeks :repweeks,
thingsType : confid
},
url : "${ctx}/memo/addNotepad",
success : function(data) {
//alert("添加数据完成"+data)
//closewait();
window.location.reload();
//若执行成功的话，则隐藏进度条提示
if (data != null && data != 'undefined'
&& data == 1) {
layer.msg('记事本添加成功!', {icon: 6,time:1000});
parent.flushParent();
layer_close();
window.location.reload();
}else if (data == -1) {
layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
}else if (data == 0) {
layer.msg('很抱歉！添加失败!', {icon: 5,time:1000});
}else{
layer.msg('系统异常！请与系统管理员联系!', {icon: 5,time:1000});
}
}
});
}
}
});
$( "#reservebox" ).dialog( "open" );
return false;
},
timeFormat: 'HH:mm{ - HH:mm}',
eventClick: function(event) {
var fstart = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
var schdata = {sid:event.sid, deleted:1, uid:event.uid};
$( "#reserveinfo" ).dialog({
autoOpen: false,
height: 280,
width: 400,
modal: true,
position: "center",
draggable: false,
buttons: {
"close": function() {
$( this ).dialog( "close" );
}
}
});
if(1==1||2==schdata.uid){
$("#reserveinfo").dialog("option", "buttons", {
"取消": function() {
$( this ).dialog( "close" );
},
"取消日程": function() {
// var answer = confirm("确定取消日程吗?");
/* layer.confirm("确定取消日程吗?",{
btn: ['确定', '取消'] //按钮
},function () {
alert("进入到了confirm里面")
});*/
/*if(answer){*/
// alert("eventId===="+event.id)
$.ajax({
type : "post",
data :{
id :event.id
},
url : "${ctx}/memo/cancleNotepad",
success : function(data) {
window.location.reload();
//若执行成功的话，则隐藏进度条提示
if (data != null && data != 'undefined'
&& data == 1) {
layer.msg('记事本取消成功!', {icon: 6,time:1000});
parent.flushParent();
layer_close();
window.location.reload();
}else if (data == -1) {
layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
}else if (data == 0) {
layer.msg('很抱歉！添加失败!', {icon: 5,time:1000});
}else{
layer.msg('系统异常！请与系统管理员联系!', {icon: 5,time:1000});
}
}
});
/*}*/
}
});
}
var showtopic = '';
if(event.topic.length>15){
showtopic = event.topic.substring(0, 15) + '...';
}else{
showtopic = event.topic;
}
$("#revdesc").html('' + showtopic + "" + '' + '' +''+'事件类型:'+'' + ' '+ event.confname + '' + event.confshortname + ' '+ event.confname+'记事' + ' 由 ' + event.fullname +' 创建'+''+''+'内容:'+'' + event.description+ '');
$( "#reserveinfo" ).dialog(
{ title: fstart + "-" + fend + " " + showtopic }
);
$( "#reserveinfo" ).dialog( "open" );
return false;
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventMouseover: function(calEvent, jsEvent, view) {
var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
var fend = $.fullCalendar.formatDate(calEvent.end, "HH:mm");
$(this).attr('title', fstart + " - " + fend + " " + calEvent.topic + " : " + calEvent.description);
$(this).css('font-weight', 'normal');
$(this).tooltip({
effect:'toggle',
cancelDefault: true
});
},
eventMouseout: function(calEvent, jsEvent, view) {
$(this).css('font-weight', 'normal');
},
eventRender: function(event, element) {
var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
// Bug in IE8
//element.html('' + fstart + "-" + fend + '' + event.title + "");
},
eventAfterRender : function(event, element, view) {
/* alert("event===="+event.toString());
alert("element===="+element.toString());
alert("view===="+view.name);*/
var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
//element.html('Time: ' + fstart + "-" + fend + 'Room:' + event.confname + 'Host:' + event.fullname + "");
var confbg='';
if(event.confid==1){
confbg = confbg + '';
}else if(event.confid==2){
confbg = confbg + '';
}else if(event.confid==3){
confbg = confbg + '';
}else if(event.confid==4){
confbg = confbg + '';
}else if(event.confid==5){
confbg = confbg + '';
}else if(event.confid==6){
confbg = confbg + '';
}else{
confbg = confbg + '';
}
var titlebg = '' + event.confshortname + '';
if(event.repweeks>0){
titlebg = titlebg + 'R';
}
if(view.name=="month"){
var evtcontent = '';
element.html(evtcontent);
}else if(view.name=="agendaWeek"){
var evtcontent = '';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '' + fstart + "-" + fend + titlebg + '';
evtcontent = evtcontent + '' + event.confname + ' 由 ' + event.fullname + ' 创建 '+ '';
//evtcontent = evtcontent + '' + event.fullname + '';
evtcontent = evtcontent + '';
element.html(evtcontent);
}else if(view.name=="agendaDay"){
var evtcontent = '';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '' + fstart + " - " + fend + titlebg + '';
evtcontent = evtcontent + '事件类型: ' + event.confname + '';
evtcontent = evtcontent + '人员: ' + event.fullname + '';
evtcontent = evtcontent + 'Topic: ' + event.topic + '';
evtcontent = evtcontent + '';
element.html(evtcontent);
}
},
eventDragStart: function( event, jsEvent, ui, view ) {
ui.helper.draggable("option", "revert", true);
},
eventDragStop: function( event, jsEvent, ui, view ) {
},
eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
console.log("进行时间拖拽的时候触发的事件");
console.log("event.start"+event.start)
console.log("event.end"+event.end)
console.log("event.id"+event.id)
//拖拽的时候进行时间的改变
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
type : "post",
data :{
id :event.id,
start :start,
end :end
},
url : "${ctx}/memo/updateNotepad",
success : function(data) {
if (data == 1){
console.log("拖拽事件成功")
}else {
console.log("拖拽事件失败")
}
}
});
if(1==1||2==event.uid){
var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
}else{
revertFunc();
}
},
eventResizeStart: function( event, jsEvent, ui, view ) {
//alert('resizing');
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
if(1==1||2==event.uid){
var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
}else{
revertFunc();
}
}
});
现在对以上代码进行简单的介绍,因为具体的使用方法可以查看API进行设置:
header:{
right: 'prev,next today',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
这里面引用的是fullCalendar.css里面的内容,可以修改文件相对应的标签,然后自定义是使用英文的还是汉字的,还有日历头部显示的周几,都可以在里面进行修改.
然后是:
events: function(start, end , callback){
var now = new Date();
//初始化参数
var name = "songyuan";
var title = "";
var content = "";
var noteType = "";
//alert("进入到查询日程的方法里.内部")
$.ajax({
type : "post",
url : "${ctx}/memo/getNotepad",
success : function(data) {
var events = [];
//alert("进入到events内部")
$.each(data,function (key,value) {
var noteType ="";
if (value.noteType==1){
noteType = "工作";
}else if (value.noteType==2){
noteType = "生活";
}else if (value.noteType==3){
noteType = "家庭";
}else if (value.noteType==4){
noteType = "私密";
}else {
noteType = "其他";
}
events.push({
sid: 2,
uid: 3,
title: '记事簿',
start: value.starTime,
end: value.endTime,
fullname: value.name,
confname: noteType,
confshortname: 'M1',
confcolor: '#ff3f3f',
confid: value.noteType,
allDay: false,
topic: value.title,
description : value.content,
id: value.id,
});
});
callback(events);
}
});
},
官网上给的API介绍的是有三种方法进行数据的赋值的,基于项目开发,所以数据应该是从数据库里面查到的,多以选用的方法为官网的第三种,比较方便,第二种提供URL返回json对象,感觉没这个简单,因人而异.
然后是点击选中某天的事件:
dayClick: function(date, allDay, jsEvent, view) {
var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
$( "#reservebox" ).dialog({
autoOpen: false,
height: 450,
width: 400,
title: '建立记事簿 ' + selectdate,
modal: true,
position: "center",
draggable: false,
beforeClose: function(event, ui) {
$.validationEngine.closePrompt("#thingsType");
$.validationEngine.closePrompt("#start");
$.validationEngine.closePrompt("#end");
},
buttons: {
"取消": function() {
$( this ).dialog( "close" );
},
"添加": function() {
// alert("这就是点击了reserve的方法")
/* if($("#reserveformID").validationEngine({returnIsValid:true})){*/
var startdatestr = $("#start").val();
var enddatestr = $("#end").val();
var confid = $("#thingsType").val();
var repweeks = $("#repweeks").val();
if(repweeks==null){
repweeks=0;
}
var startdate = $.fullCalendar.parseDate(selectdate+"T"+startdatestr);
var enddate = $.fullCalendar.parseDate(selectdate+"T"+enddatestr);
var schdata = {startdate:startdate, enddate:enddate, confid:confid, repweeks:repweeks};
var title = $("#title").val();
var content = $("#details").val();
/*}*/
//alert("startdatestr=="+startdatestr+"enddatestr=="+enddatestr+"enddatestr=="+enddatestr+"confid=="+confid+"repweeks=="+repweeks+"startdate=="+startdate+"enddate=="+enddate+"schdata=="+schdata)
$.ajax({
type : "post",
data :{
title : title,
content : content,
starTime : selectdate+" "+startdatestr+":00",
endTime : selectdate+" "+enddatestr+":00",
repeatWeeks :repweeks,
thingsType : confid
},
url : "${ctx}/memo/addNotepad",
success : function(data) {
//alert("添加数据完成"+data)
//closewait();
window.location.reload();
//若执行成功的话，则隐藏进度条提示
if (data != null && data != 'undefined'
&& data == 1) {
layer.msg('记事本添加成功!', {icon: 6,time:1000});
parent.flushParent();
layer_close();
window.location.reload();
}else if (data == -1) {
layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
}else if (data == 0) {
layer.msg('很抱歉！添加失败!', {icon: 5,time:1000});
}else{
layer.msg('系统异常！请与系统管理员联系!', {icon: 5,time:1000});
}
}
});
}
}
});
$( "#reservebox" ).dialog( "open" );
return false;
},
点击选中之后,js调用弹出一个自定义的表单,可以根据自己的项目需求进行字段的选择,本文的选择如下图所示:
填写好对应的字段然后点击确认保存调用Ajax调用后台进行数据的持久化操作
然后就是点击选中事件后显示的效果及方法代码,也就是展示的记事本的详情信息以及删除操作,本阶段还未实现编辑,麻烦懒得弄,有兴趣的朋友可以试下:
eventClick: function(event) {
var fstart = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
var schdata = {sid:event.sid, deleted:1, uid:event.uid};
$( "#reserveinfo" ).dialog({
autoOpen: false,
height: 280,
width: 400,
modal: true,
position: "center",
draggable: false,
buttons: {
"close": function() {
$( this ).dialog( "close" );
}
}
});
if(1==1||2==schdata.uid){
$("#reserveinfo").dialog("option", "buttons", {
"取消": function() {
$( this ).dialog( "close" );
},
"取消日程": function() {
// var answer = confirm("确定取消日程吗?");
/* layer.confirm("确定取消日程吗?",{
btn: ['确定', '取消'] //按钮
},function () {
alert("进入到了confirm里面")
});*/
/*if(answer){*/
// alert("eventId===="+event.id)
$.ajax({
type : "post",
data :{
id :event.id
},
url : "${ctx}/memo/cancleNotepad",
success : function(data) {
window.location.reload();
//若执行成功的话，则隐藏进度条提示
if (data != null && data != 'undefined'
&& data == 1) {
layer.msg('记事本取消成功!', {icon: 6,time:1000});
parent.flushParent();
layer_close();
window.location.reload();
}else if (data == -1) {
layer.msg('记事本名称已经存在!', {icon: 5,time:1000});
}else if (data == 0) {
layer.msg('很抱歉！添加失败!', {icon: 5,time:1000});
}else{
layer.msg('系统异常！请与系统管理员联系!', {icon: 5,time:1000});
}
}
});
/*}*/
}
});
}
var showtopic = '';
if(event.topic.length>15){
showtopic = event.topic.substring(0, 15) + '...';
}else{
showtopic = event.topic;
}
$("#revdesc").html('' + showtopic + "" + '' + '' +''+'事件类型:'+'' + ' '+ event.confname + '' + event.confshortname + ' '+ event.confname+'记事' + ' 由 ' + event.fullname +' 创建'+''+''+'内容:'+'' + event.description+ '');
$( "#reserveinfo" ).dialog(
{ title: fstart + "-" + fend + " " + showtopic }
);
$( "#reserveinfo" ).dialog( "open" );
return false;
},
然后还有鼠标悬浮事件之类的更多的方法,这里就不一一赘述了,有兴趣的朋友可以自行研究,接下来就是本jsp页面的所有代码:
<%--
Created by IntelliJ IDEA.
User: zhangrui
Date: 2018/1/16
Time: 11:15
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
Title
<%--layer弹出框--%>
<%----%>
本文所使用demo参考于:http://www.gbin1.com上面的一个文章.感谢
如有侵权，请联系，速删。
另声明，发送的demo并不为博主商业用途，无盈利。
注:本文代码比较繁杂,多处为博主调试所用,仅供参考,另,js以及CSS文件暂时没上传,有需要的可留言,博主抽时间一一发送.