fullCalendar插件的使用简单教程

最近项目中想实现一个基于日历的事件提醒,百度众多资源后选定使用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: 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">
    <!-- 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>
                <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>

<!-- 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 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上面的一个文章.感谢
注:本文代码比较繁杂,多处为博主调试所用,仅供参考,另,js以及CSS文件暂时没上传,有需要的可留言,博主抽时间一一发送.