转载请标明出处：
原文首发于：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文件:


<!-- Jquery and Jquery UI --><script type="text/javascript" src="${ctx}/static/js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="${ctx}/static/js/jquery-ui-1.8.6.custom.min.js"></script><script type="text/javascript" src="${ctx}/static/js/jquery-ui-timepicker-addon.js"></script>
<script type='text/javascript' src='${ctx}/static/js/fullcal/fullcalendar.js'></script>
<script type="text/javascript" src="${ctx}/static/js/formValidator/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="${ctx}/static/js/formValidator/js/jquery.validationEngine.js" ></script><link href="${ctx}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/H-ui.min.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/H-ui.admin.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/style_w.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/bootstrapValidator.min.css" rel="stylesheet"><title>Title</title><link rel="stylesheet" href="${ctx}/static/css/mainstructure.css"><link rel="stylesheet" href="${ctx}/static/css/maincontent.css"><link rel="stylesheet" href="${ctx}/static/css/redmond/jquery-ui-1.8.1.custom.css"><!-- Jquery and Jquery UI --><link rel="stylesheet" href="${ctx}/static/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /><!-- FullCalender --><link rel='stylesheet' type='text/css' href='${ctx}/static/js/fullcal/css/fullcalendar.css' />

其中主要的是关于fullcalendar以及validationEngine,的文件,部分调用jquery-1.4.2.min.js,UI用的是JQueryUI.那么接下来说下部分代码片的使用:
首先是日历的初始化,声明日历位置,然后对其进行初始化,因为我建立的日历事件是由开始时间,结束时间,事件类型,创建人,重复周数,标题,内容等字段组成,所以在进行日历的表层展示数据的时候进行展示的只有:创建人,标题,以及事件类型:
下面是效果图

<div id=calendar></div>

 $('#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('<div style="font-weight:bold;color:#5383c2;border-bottom: 1px dotted #5383c2; padding: 3px 0px 3px;">'  + showtopic   + "</div>" + '<div style="padding: 10px 0px 3px">'  + '<div style="width:128px;float:left;color: #0a68b4">' +'<b>'+'事件类型:'+'</b>' + '　'+ event.confname + '<div style="background:#A4C3E3; text-align:center; padding:5px;color:#1d5987;font-weight:bold;font-size:9px"><span style="background:'+ event.confcolor +';width:14px;height:14px;color:#E3E3E3;font-size:10px;position:relative;left:0;top:0;">' + event.confshortname + '</span>&nbsp;'+ event.confname+'记事' + ' 由 ' + event.fullname +'　创建'+'</div></div><div style="float:right;width:220px; padding:0px ; margin:0px;color: #0a68b4">'+'<b>'+'内容:'+'</b>' + event.description+ '</div><div style="clear:both"></div></div>');$( "#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('<a href=#>' + fstart + "-" +  fend + '<div style=color:#E5E5E5>' +  event.title + "</div></a>");},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('<a href=#><div>Time: ' + fstart + "-" +  fend + '</div><div>Room:' + event.confname + '</div><div style=color:#E5E5E5>Host:' +  event.fullname + "</div></a>");var confbg='';if(event.confid==1){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==2){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==3){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==4){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==5){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==6){confbg = confbg + '<span class="fc-event-bg"></span>';}else{confbg = confbg + '<span class="fc-event-bg"></span>';}var titlebg =  '<span class="fc-event-conf" style="background:'+  event.confcolor +'">' + event.confshortname + '</span>';if(event.repweeks>0){titlebg = titlebg + '<span class="fc-event-conf" style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>';}if(view.name=="month"){var evtcontent = '<div class="fc-event-vert"><a>';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-titlebg" style="color: whitesmoke">' +  fstart + " - " +  fend + titlebg + '</span>';evtcontent = evtcontent + '<span style="color: rebeccapurple">事件类型: ' +  event.confname + '</span>';evtcontent = evtcontent + '<span style="color: #0a68b4">人员: ' +  event.fullname + '</span>';evtcontent = evtcontent + '<span style="color: #0A4798">标题: ' +  event.topic + '</span>';evtcontent = evtcontent + '</a><div class="ui-resizable-handle ui-resizable-e"></div></div>';element.html(evtcontent);}else if(view.name=="agendaWeek"){var evtcontent = '';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-time">' +  fstart + "-" +  fend + titlebg + '</span>';evtcontent = evtcontent + '<span>' +  event.confname + ' 由 ' + event.fullname + ' 　创建 '+ '</span>';//evtcontent = evtcontent + '<span>' +  event.fullname + '</span>';evtcontent = evtcontent + '<span class="ui-icon ui-icon-arrowthick-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';element.html(evtcontent);}else if(view.name=="agendaDay"){var evtcontent = '';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-time">' +  fstart + " - " +  fend + titlebg + '</span>';evtcontent = evtcontent + '<span>事件类型: ' +  event.confname + '</span>';evtcontent = evtcontent + '<span>人员: ' +  event.fullname + '</span>';evtcontent = evtcontent + '<span>Topic: ' +  event.topic + '</span>';evtcontent = evtcontent + '<span class="ui-icon ui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';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('<div style="font-weight:bold;color:#5383c2;border-bottom: 1px dotted #5383c2; padding: 3px 0px 3px;">'  + showtopic   + "</div>" + '<div style="padding: 10px 0px 3px">'  + '<div style="width:128px;float:left;color: #0a68b4">' +'<b>'+'事件类型:'+'</b>' + '　'+ event.confname + '<div style="background:#A4C3E3; text-align:center; padding:5px;color:#1d5987;font-weight:bold;font-size:9px"><span style="background:'+ event.confcolor +';width:14px;height:14px;color:#E3E3E3;font-size:10px;position:relative;left:0;top:0;">' + event.confshortname + '</span>&nbsp;'+ event.confname+'记事' + ' 由 ' + event.fullname +'　创建'+'</div></div><div style="float:right;width:220px; padding:0px ; margin:0px;color: #0a68b4">'+'<b>'+'内容:'+'</b>' + event.description+ '</div><div style="clear:both"></div></div>');$( "#reserveinfo" ).dialog({ title:  fstart + "-" + fend + " " + showtopic });$( "#reserveinfo" ).dialog( "open" );return false;},

然后还有鼠标悬浮事件之类的更多的方法,这里就不一一赘述了,有兴趣的朋友可以自行研究,接下来就是本jsp页面的所有代码:

<%--Created by IntelliJ IDEA.User: zhangruiDate: 2018/1/16Time: 11:15To 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" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head><link href="${ctx}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/H-ui.min.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/H-ui.admin.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/style_w.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" /><link href="${ctx}/static/css/bootstrapValidator.min.css" rel="stylesheet"><title>Title</title><link rel="stylesheet" href="${ctx}/static/css/mainstructure.css"><link rel="stylesheet" href="${ctx}/static/css/maincontent.css"><link rel="stylesheet" href="${ctx}/static/css/redmond/jquery-ui-1.8.1.custom.css"><!-- Jquery and Jquery UI --><link rel="stylesheet" href="${ctx}/static/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /><!-- FullCalender --><link rel='stylesheet' type='text/css' href='${ctx}/static/js/fullcal/css/fullcalendar.css' /><style type=text/css>#loading {TOP: 0px; RIGHT: 0px}.tooltip {PADDING-BOTTOM: 25px; PADDING-LEFT: 25px; WIDTH: 160px; PADDING-RIGHT: 25px; DISPLAY: none; BACKGROUND: url(images/black_arrow.png); HEIGHT: 70px; COLOR: #fff; FONT-SIZE: 12px; PADDING-TOP: 25px; z-order: 100}.fc-event,.fc-agenda .fc-event-time,.fc-event a {background-color: black; /* background color */border-color: black;  /* border color (often same as background-color) */color: yellow;    /* text color */}</style>
</head><body><!-- Jquery and Jquery UI --><script type="text/javascript" src="${ctx}/static/js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="${ctx}/static/js/jquery-ui-1.8.6.custom.min.js"></script><script type="text/javascript" src="${ctx}/static/js/jquery-ui-timepicker-addon.js"></script>
<script type='text/javascript' src='${ctx}/static/js/fullcal/fullcalendar.js'></script>
<script type="text/javascript" src="${ctx}/static/js/formValidator/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="${ctx}/static/js/formValidator/js/jquery.validationEngine.js" ></script><%--layer弹出框--%>
<script type="text/javascript" src="${ctx}/static/lib/layer/1.9.3/layer.js"></script>
<%--<script type="text/javascript" src="${ctx}/static/lib/jquery/1.9.1/jquery.min.js"></script>--%>
<div id=wrap><div id=calendar></div><div id=reserveinfo title=Details><div id=revtitle></div><div id=revdesc></div></div><div style="DISPLAY: none" id=reservebox title="建立记事簿"><form id=reserveformID method=post><tr><td><div class=rowElem><!--<input type="text" name="thingsType" id="thingsType" class="validate[required]">--><lable>事件类型:</lable><select id = "thingsType" <%--class=validate[required]--%> name = "thingsType"><option selected value = "1">工作</option><option value = "2">生活</option><option value = "3">家庭</option><option value = "4">私密</option><option value = "5">其他</option></select> </div></td></tr><%--<div class=sysdesc>&nbsp;</div>--%><tr><td><div class=rowElem></div></td><td><lable>重复周数:</lable><div style="width: 500px"><select id= "repweeks" name="repweeks" style="width: 230px;"><option selected value = "0">不重复</option><option value = "1">1 周</option><option value = "2">2 周</option><option value = "3">3 周</option><option value = "4">4 周</option><option value = "8">8 周</option><option value = "16">16 周</option><option value = "32">32 周</option></select ></div></td></tr><tr><td> <div class=rowElem></div></td><td><lable>开始时间:</lable><INPUT id= "start" class=validate[required,funcCall[validate2time]] name="start"></td></tr><tr><td> <div class=rowElem> </div></td><td><lable>结束时间:</lable><INPUT id="end" class=validate[required,funcCall[validate2time]] name=end> </td></tr><tr><th></th><td><div class=rowElem> </div></td><td><lable>标题:</lable> <INPUT id=title name=title></td></tr><div class=rowElem><lable>内容:</lable> <textarea id=details rows=3 cols=43 name=details></textarea> </div><div class=rowElem> </div><div class=rowElem> </div><div id=addhelper class=ui-widget><divstyle="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px"class="ui-state-error ui-corner-all"><div id=addresult></div></div></div></form></div>
</div>
<div id=footer>Copyright 2018 by <ahref="http://www.yyxtech.com/">http://www.yyxtech.com</a>
</div><!-- google and baidu code -->
<script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-19118450-1']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
</script>
<script type="text/javascript">var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fd999331ad5ea0c0930f3aa7c3bda9fc1' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- end of google and baidu code -->
<script type=text/javascript>
$(function () {/*初始化参数*/$(document).ready(function() {//selectNotepad();$("#reserveformID").validationEngine({validationEventTriggers:"keyup blur",openDebug: true}) ;$("#start").timepicker({dateFormat:'yy-mm-dd', timeFormat:'hh:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15});$("#end").timepicker({dateFormat:'yy-mm-dd', timeFormat:'hh:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15});$("#addhelper").hide();$('#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('<div style="font-weight:bold;color:#5383c2;border-bottom: 1px dotted #5383c2; padding: 3px 0px 3px;">'  + showtopic   + "</div>" + '<div style="padding: 10px 0px 3px">'  + '<div style="width:128px;float:left;color: #0a68b4">' +'<b>'+'事件类型:'+'</b>' + '　'+ event.confname + '<div style="background:#A4C3E3; text-align:center; padding:5px;color:#1d5987;font-weight:bold;font-size:9px"><span style="background:'+ event.confcolor +';width:14px;height:14px;color:#E3E3E3;font-size:10px;position:relative;left:0;top:0;">' + event.confshortname + '</span>&nbsp;'+ event.confname+'记事' + ' 由 ' + event.fullname +'　创建'+'</div></div><div style="float:right;width:220px; padding:0px ; margin:0px;color: #0a68b4">'+'<b>'+'内容:'+'</b>' + event.description+ '</div><div style="clear:both"></div></div>');$( "#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('<a href=#>' + fstart + "-" +  fend + '<div style=color:#E5E5E5>' +  event.title + "</div></a>");},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('<a href=#><div>Time: ' + fstart + "-" +  fend + '</div><div>Room:' + event.confname + '</div><div style=color:#E5E5E5>Host:' +  event.fullname + "</div></a>");var confbg='';if(event.confid==1){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==2){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==3){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==4){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==5){confbg = confbg + '<span class="fc-event-bg"></span>';}else if(event.confid==6){confbg = confbg + '<span class="fc-event-bg"></span>';}else{confbg = confbg + '<span class="fc-event-bg"></span>';}var titlebg =  '<span class="fc-event-conf" style="background:'+  event.confcolor +'">' + event.confshortname + '</span>';if(event.repweeks>0){titlebg = titlebg + '<span class="fc-event-conf" style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R</span>';}if(view.name=="month"){var evtcontent = '<div class="fc-event-vert"><a>';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-titlebg" style="color: whitesmoke">' +  fstart + " - " +  fend + titlebg + '</span>';evtcontent = evtcontent + '<span style="color: rebeccapurple">事件类型: ' +  event.confname + '</span>';evtcontent = evtcontent + '<span style="color: #0a68b4">人员: ' +  event.fullname + '</span>';evtcontent = evtcontent + '<span style="color: #0A4798">标题: ' +  event.topic + '</span>';evtcontent = evtcontent + '</a><div class="ui-resizable-handle ui-resizable-e"></div></div>';element.html(evtcontent);}else if(view.name=="agendaWeek"){var evtcontent = '';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-time">' +  fstart + "-" +  fend + titlebg + '</span>';evtcontent = evtcontent + '<span>' +  event.confname + ' 由 ' + event.fullname + ' 　创建 '+ '</span>';//evtcontent = evtcontent + '<span>' +  event.fullname + '</span>';evtcontent = evtcontent + '<span class="ui-icon ui-icon-arrowthick-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';element.html(evtcontent);}else if(view.name=="agendaDay"){var evtcontent = '';evtcontent = evtcontent + confbg;evtcontent = evtcontent + '<span class="fc-event-time">' +  fstart + " - " +  fend + titlebg + '</span>';evtcontent = evtcontent + '<span>事件类型: ' +  event.confname + '</span>';evtcontent = evtcontent + '<span>人员: ' +  event.fullname + '</span>';evtcontent = evtcontent + '<span>Topic: ' +  event.topic + '</span>';evtcontent = evtcontent + '<span class="ui-icon ui-icon-arrow-2-n-s"><div class="ui-resizable-handle ui-resizable-s"></div></span>';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 ) {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();}}});//goto date functionif($.browser.msie){$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:1px 3px 2px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');}else{$("#calendar .fc-header-right table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" style="border-right:0px;padding:3px 2px 4px;" ><input type="text" id="selecteddate" size="10" style="padding:0px;"></div></td><td><div class="ui-state-default ui-corner-left ui-corner-right"><a><span id="selectdate" class="ui-icon ui-icon-search">goto</span></a></div></td><td><span class="fc-header-space"></span></td>');}$("#selecteddate").datepicker({dateFormat:'yy-mm-dd',beforeShow: function (input, instant) {setTimeout(function () {$('#ui-datepicker-div').css("z-index", 15);}, 100);}});$("#selectdate").click(function() {var selectdstr =     $("#selecteddate").val();var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");$('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());});// conference function$("#calendar .fc-header-left table td:eq(0)").before('<td><div class="ui-state-default ui-corner-left ui-corner-right" id="selectmeeting"><a><span id="selectdate"  style="float: left;padding-left: 5px; padding-top:1px"></span>记事本</a></div></td><td><span class="fc-header-space"></span></td>');});})function selectNotepad() {//alert("进入到查询日程的方法里.底部")$.ajax({type : "post",url : "${ctx}/memo/getNotepad",success : function(data) {//alert("查询数据完成"+data.name);$.each(data,function (key,value) {//alert("value.userName"+value.name)userName = value.name;//alert("name=="+name)});}});}function validate2time(){//alert("debug");var cresult = compare2time($("#start").val(), $("#end").val());if(cresult==0){return false;}else if(cresult==1){$.validationEngine.closePrompt("#start");return true;}}</script></body>
</html>

本文所使用demo参考于:http://www.gbin1.com上面的一个文章.感谢
如有侵权，请联系，速删。
另声明，发送的demo并不为博主商业用途，无盈利。
注:本文代码比较繁杂,多处为博主调试所用,仅供参考,另,js以及CSS文件暂时没上传,有需要的可留言,博主抽时间一一发送.

关注公众号回复 fullCalendar 即可获取下载链接自行下载呦，省的等博主手动发送哟~~

fullCalendar插件的使用简单教程相关推荐

vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
点击右上方红色按钮关注"web秀",让你真正秀起来前言表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单 ...
涨姿势|小众建模软件Make human,MakeClothes插件使用详解教程（2）
衣服可以从头开始建模,或者通过改变人体网格或由MakeClothes工具提供的"服装助手"(见下文)来建模.在设计和建模一件衣物时,应该记住两个限制.首先,将服装网格映射到人体网格 ...
基于FullCalendar插件的个人日程安排系统(4)
这一篇开始要用到FullCalendar插件,由于我自己也是头一次用,也不是很了解,所以只能简单介绍一下,大家可以一起讨论. 效果图 customer_index.jsp <%@ page la ...
SkinFiner（人像磨皮软件）官方中文版V4.0 | skinfiner插件下载 | skinfiner安装教程
skinfiner是什么软件: SkinFiner是一款优秀高效的全自动专业高品质人像磨皮软件,具有智能磨皮.快速均匀肤色.自然肤色润饰以及快速批量处理等强大功能,可以帮助用户以最简单和最快捷的方式磨 ...
html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享
34个网页视差滚动插件和视差特效教程分享 Sponsor 视差滚动这个设计趋势从去年开始一直流行到现在,这个特效的视觉体验非常不错,比如前面分享的<19个创意网页设计欣赏>文章,有很多使视 ...
【Unity学习】关于串口通信插件SerialPortUtilityPro的简单使用个人案例
[Unity学习]关于串口通信插件SerialPortUtilityPro的简单使用个人案例前言需求分析串口发送数据串口接收数据并解析结语前言关于插件资源,请去资源商店购买或使用其试用版 ...
vue -- vue-i18n国际化使用简单教程
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 vue-i18n是一个针对于vue的国际化插件,使用非常简单,具体使用方式看我细细道来. 实现方式这里我们直接讲在实际开 ...
ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 异常和错误处理上一章节中,我们学习了 ASP.NET Cor ...
idea 从svn导入多个项目_IDEA导入项目简单教程
该教程用于IDEA初学者导入eclipse项目,或者导入其他已经写好的Java源程序的简单教程. 我们用IDEA打开一个已经写好的项目源文件时,如果没有配置好,就会出现:JDK配置失误报错.程序无法启 ...

fullCalendar插件的使用简单教程