转载请标明出处:
原文首发于: http://www.zhangruibin.com
本文出自 RebornChang的博客
厚颜打广告
亲,博主的微信公众号
‘程序员小圈圈’开始持续更新了哟~~
关注公众号回复 fullCalendar 或者 full 即可获取下载链接自行下载呦,省的等博主手动发送哟~~
还能不公开邮箱哟~~
长按图片识别二维码或者微信扫描二维码或者直接搜索名字 ‘CXYX’ 即可关注本公众号哟~~
不只是有技术哟~~
还可以学下教育知识以及消遣娱乐哟~~
求关注哟~~
有好的文章可以联系投稿哟~

(追加于:2019-08-16))
正文开始
Title

$('#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' },
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; },
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弹出框--%>
<%--
--%>
关注公众号回复 fullCalendar 即可获取下载链接自行下载呦,省的等博主手动发送哟~~
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/205777.html原文链接:https://javaforall.net
