fullCalendar插件的使用简单教程

た入场券 2022-06-01 03:56 418阅读 0赞

> 转载请标明出处：  
> 原文首发于： [http://www.zhangruibin.com][http_www.zhangruibin.com]  
> 本文出自 [RebornChang的博客][http_www.zhangruibin.com]

# 厚颜打广告 #

亲，博主的微信公众号

‘程序员小圈圈’开始持续更新了哟~~

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

# 还能不公开邮箱哟~~ #

长按图片识别二维码或者微信扫描二维码或者直接搜索名字 ‘CXYXQQ’ 即可关注本公众号哟~~

不只是有技术哟~~

还可以学下教育知识以及消遣娱乐哟~~

求关注哟~~

有好的文章可以联系投稿哟~

![aHR0cHM6Ly93d3cuemhhbmdydWliaW4uY29tL3VwbG9hZC8yMDE5LzA4LzZyZTV1Z2dnNGtobXRycml0NTM0dWJoNzU5LnBuZw][]  
（追加于：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文件:

<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">
        
        <link rel="stylesheet" href="${ctx}/static/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
        
        <link rel='stylesheet' type='text/css' href='${ctx}/static/js/fullcal/css/fullcalendar.css' />

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

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTE5MTIyOTIwNjE3]

$('#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> '+ 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调用弹出一个自定义的表单,可以根据自己的项目需求进行字段的选择,本文的选择如下图所示:  
![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTE5MTIzMDQ5NDc4]  
填写好对应的字段然后点击确认保存调用Ajax调用后台进行数据的持久化操作  
然后就是点击选中事件后显示的效果及方法代码,也就是展示的记事本的详情信息以及删除操作,本阶段还未实现编辑,麻烦懒得弄,有兴趣的朋友可以试下:  
![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTE5MTIzMTAyMjM2]

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> '+ 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: 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" %>
    <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">
        
        <link rel="stylesheet" href="${ctx}/static/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
        
        <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>
    
    
    
    <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>
                        <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> </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>
                    <div
                            style="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 <a
            href="http://www.yyxtech.com/">http://www.yyxtech.com</a>
    </div>
    
    
    <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>
    
    <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> '+ 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 function
            if($.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 即可获取下载链接自行下载呦，省的等博主手动发送哟~~ #

[http_www.zhangruibin.com]: http://www.zhangruibin.com
[aHR0cHM6Ly93d3cuemhhbmdydWliaW4uY29tL3VwbG9hZC8yMDE5LzA4LzZyZTV1Z2dnNGtobXRycml0NTM0dWJoNzU5LnBuZw]: /images/20220601/7c56f1ae2d494a69a231060182d7bf2c.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTE5MTIyOTIwNjE3]: /images/20220601/528303f1207b44aab82874e08975eec7.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTE5MTIzMDQ5NDc4]: /images/20220601/1587de17a88745579b0ae09cbd5d53fc.png
[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTE5MTIzMTAyMjM2]: /images/20220601/14729977475e4d2fbe3398d298604114.png