关于fullcalendar里显示Ajax后台返回xml格式的events(1)

近日在研究Jquery中的fullcalenda的使用方法，因为是加载ExtJs中使用的，还是费了很大的努力。现在基本上已经研究的差不多了，现在整理出来，供广大开发爱好者一起学习，话不多说，直入正题。。。

第一步：在Html页面里加载相关的JS文件（这一步事很关键，因为有些JS文件如果不匹配的话，后面的所调用的方法是很难实现的，博主就在这个地方走了很多弯路）

Js文件下载地址：http://download.csdn.net/detail/ofuhuaderensheng/7209107

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv="Content-Type" contenttype="text/xml; charset=UTF-8" />
<html>
<head>
<link href="../../fullcalendar/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="../../fullcalendar/css/mainstructure.css" rel="stylesheet" type="text/css" />
<link href="../../fullcalendar/css/maincontent.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' type='text/css' href='../../fullcalendar/cupertino/theme.css' />
<link rel='stylesheet' type='text/css' href='../../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='../../fullcalendar/fullcalendar.print.css'media='print' />
<!--这是后台所封装的访问Ajax的方法-->
<script type="text/javascript" src="/includes/xjs1.js"></script>
		
<script src="../../fullcalendar/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../../fullcalendar/jquery-ui.min1.9.1.js" type="text/javascript"></script>
<script src="../../fullcalendar/jquery-ui-timepicker-addon.js"></script>
<script src="../../fullcalendar/jquery-ui-sliderAccess.js"></script>
<script src="../../fullcalendar/datepicker-zh.js" type="text/javascript"></script>
<link href="../../fullcalendar/jquery-ui-timepicker-addon.css"rel="stylesheet" />
<script src="../../fullcalendar/fullcalendar.js" type="text/javascript"></script>

第二步：在Html页面中加载Fucallendar，包括读取事件，新增事件，删除事件，以及事件的修改

<script type='text/javascript'>

    $(document).ready(function () {
        $("#start").timepicker({ dateFormat: 'yy-mm-dd',timeFormat: 'hh:mm',hourMin: 5,hourMax: 24,hourGrid: 3,minuteGrid: 15,timeText: '时间',hourText: '时',minuteText: '分',timeOnlyTitle: '选择时间',onClose: function (dateText,inst) {
            if ($('#start').val() != '') {
                var testStartDate = $('#start').datetimepicker('getDate');
                var testEndDate = $('#end').datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    $('#end').datetimepicker('setDate',testStartDate);
            } else {
                $('#end').val(dateText);
            }
        },onSelect: function (selectedDateTime) {
                $('#end').datetimepicker('option','minDate',$('#end').datetimepicker('getDate'));
            }
        });
        $("#end").datetimepicker({ dateFormat: 'yy-mm-dd',hourMax: 23,inst) {
            if ($('#start').val() != '') {
                var testStartDate = $('#start').datetimepicker('getDate');
                var testEndDate = $("#end").datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    $('#start').datetimepicker('setDate',testEndDate);
            } else {
                $('#start').val(dateText);
            }
        },onSelect: function (selectedDateTime) {
                $('#start').datetimepicker('option','maxDate',$("#end").datetimepicker('getDate'));
            }
        });
        $("#addhelper").hide();
        
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $('#calendar').fullCalendar({
            theme: true,header: {
                left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay'
            },monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthNamesShort: ["一月",dayNames: ["周日","周一","周二","周三","周四","周五","周六"],dayNamesShort: ["周日",today: ["今天"],firstDay: 1,buttonText: {
                today: '今日',month: '月',week: '周',day: '日',prev: '上一月',next: '下一月'
            },//绑定时间源，也就是为你的日历动态填充数据  
            events: function(start,end,callback) {  
           //异步获取数据  
                do_Query();
                function do_Query(){
                 var r = new xjsReq("TestService","queryReserver");
                      r.onSuccess = function(xjs_res) { 
                          var ps=xjs_res.getElementsByTagName("reserve"); 
                          var events = [];  
                          for (var i = 0; i < ps.length; i++) {       
	                         var ev = ps[i]; 
	                         var id=ev.getAttribute("id"); 
	                         var title=ev.getAttribute("title"); 
	                         var name=ev.getAttribute("name");
	                         var phone=ev.getAttribute("phone");
	                         var fee=ev.getAttribute("fee");
	                         var descrition=ev.getAttribute("descrition");
	                         var evtstart=ev.getAttribute("start");
                             var evtend=ev.getAttribute("end");
                             events.push({  
                                  id:id,title:title,Name:name,Phone:phone,Fee:fee,Descrition:descrition,start:evtstart,end:evtend,allDay:false
                              });  
                          }  
                          callback(events);  
                      }
                      r.request(); 
                  } 
        },editable: true,//判断该日程能否拖动
            dayClick: function (date,allDay,jsEvent,view) {//日期点击后弹出的jq ui的框，添加日程记录
                var selectdate = $.fullCalendar.formatDate(date,"yyyy-MM-dd");//选择当前日期的时间转换
                $("#end").datetimepicker('setDate',selectdate);//给时间空间赋值
                $("#reserveBox").dialog({
                    autoOpen: false,height: 450,width: 400,title: '实验室仪器预约 ' + selectdate,modal: true,position: "center",draggable: false,beforeClose: function (event,ui) {
                    },timeFormat: 'HH:mm{ - HH:mm}',buttons: {
                        "关闭": function () {
                            $(this).dialog("close");
                        },"预约": function () {
                            var startdatestr = $("#start").val(); //开始时间
                            var enddatestr = $("#end").val(); //结束时间
                            var confid = $("#title").val(); //标题
                            var det = $("#details").val(); //内容 
                            var name = $("#name").val(); // 预约人
                            var fee = $("#fee").val(); // 费用
                            var phone = $("#phone").val(); //电话
                            var StartTime=selectdate + " " + startdatestr; //时间和日期拼接
                            var ri = new xjsReq("TestService","saveReserver");
                            ri.add("id","");
                            ri.add("name",name);
                            ri.add("phone",phone);
                            ri.add("title",confid);
                            ri.add("fee",fee);
                            ri.add("det",det);
                            ri.add("StartTime",StartTime);
                            ri.add("enddatestr",enddatestr);
                            ri.onSuccess = function(xjs_res) {
                            var schdata2 = { title: confid,Name: name,Phone: phone,Fee: fee,Descrition:det,start: StartTime,end: enddatestr };
                                    $('#calendar').fullCalendar('renderEvent',schdata2,true);    
							$("#start").val(''); //开始时间
                            $("#end").val(''); //结束时间
                            $("#title").val(''); //标题
                            $("#details").val(''); //内容 
                            $("#name").val(''); //姓名
                            $("#phone").val(''); //电话
                            $("#fee").val(''); //费用
						    }
						ri.request();
                        $(this).dialog("close");
                        }
                    }
                });
                $("#reserveBox").dialog("open");
                return false;
            },titleFormat: "yyyyMMMMdddd",loading: function (bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            },eventAfterRender: function (event,element,view) {//数据绑定上去后添加相应信息在页面上
                var fstart = $.fullCalendar.formatDate(event.start,"HH:mm");
                var fend = $.fullCalendar.formatDate(event.end,"HH:mm");
                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>';
                }
                if (view.name == "month") {//按月份
                    var evtcontent = '<div class="fc-event-vert"><a>';
                    evtcontent = evtcontent + confbg;
                    evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + event.title + '</span>';
                    element.html(evtcontent);
                } else if (view.name == "agendaWeek") {//按周
                    var evtcontent = '<a>';
                    evtcontent = evtcontent + confbg;
                    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend  + '</span>';
                    evtcontent = evtcontent + '<span>'+ event.title + '</span>';
                    element.html(evtcontent);
                } else if (view.name == "agendaDay") {//按日
                    var evtcontent = '<a>';
                    evtcontent = evtcontent + confbg;
                    evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend +  '</span>';
                    element.html(evtcontent);
                }
            },eventMouSEOver: function (calEvent,view) {
                var fstart = $.fullCalendar.formatDate(calEvent.start,"yyyy/MM/dd HH:mm");
                var fend = $.fullCalendar.formatDate(calEvent.end,"yyyy/MM/dd HH:mm");
                $(this).attr('title',fstart + " - " + fend + " " + "标题" + " : " + calEvent.title);
                $(this).css('font-weight','normal');
                $(this).tooltip({
                    effect: 'toggle',cancelDefault: true
                });
            },eventClick: function (event) {
                var fstart = $.fullCalendar.formatDate(event.start,"HH:mm");
                var selectdate = $.fullCalendar.formatDate(event.start,"yyyy-MM-dd");
                $("#start").val(fstart);
                $("#end").datetimepicker('setDate',event.end);
                $("#title").val(event.title); //标题
                $("#details").val(event.Descrition); //内容 
                $("#name").val(event.Name); //预约人
                $("#phone").val(event.Phone); //电话
                $("#fee").val(event.Fee); //费用
                $("#reserveBox").dialog({
                    autoOpen: false,title: '实验仪器预约',ui) {
                        $("#start").val(''); //开始时间
                        $("#end").val(''); //结束时间
                        $("#title").val(''); //标题
                        $("#details").val(''); //内容 
                        $("#name").val(''); //预约人
                        $("#phone").val(''); //电话
                        $("#fee").val(''); //费用
                    },buttons: {
                        "删除": function () {
                            var aa = window.confirm("警告：确定要删除记录，删除后无法恢复！");
                            if (aa) {
                                var Id =event.id;
                                var r2 = new xjsReq("TestService","deleteReserver");
							    r2.add("id",Id);
							    r2.onSuccess = function(xjs_res) {
                                       $('#calendar').fullCalendar('removeEvents',event.id);
							    }  
							r2.request();
                            }
                            $(this).dialog("close");
                        },"修改": function () {
                            var startdatestr = $("#start").val(); //开始时间
                            var enddatestr = $("#end").val(); //结束时间
                            var confid = $("#title").val(); //标题
                            var det = $("#details").val(); //内容 
                            var name = $("#name").val(); // 预约人
                            var fee = $("#fee").val(); // 费用
                            var phone = $("#phone").val(); //电话
                            var ID=event.id;               //ID
                            alert(ID);
                            var StartTime=selectdate + " " + startdatestr; //时间和日期拼接
                            var r3 = new xjsReq("TestService","saveReserver");
                            r3.add("id",ID);
                            r3.add("name",name);
                            r3.add("phone",phone);
                            r3.add("title",confid);
                            r3.add("fee",fee);
                            r3.add("det",det);
                            r3.add("StartTime",StartTime);
                            r3.add("enddatestr",enddatestr);
                            r3.onSuccess = function(xjs_res) {
                            $('#calendar').fullCalendar('removeEvents',event.id);
                            var schdata2 = { id :ID,title: confid,true);    
							$("#start").val(''); //开始时间
                            $("#end").val(''); //结束时间
                            $("#title").val(''); //标题
                            $("#details").val(''); //内容 
                            $("#name").val(''); //姓名
                            $("#phone").val(''); //电话
                            $("#fee").val(''); //费用
						    }
						r3.request();
                            $(this).dialog("close");
                        }

                    }
                });
                $("#reserveBox").dialog("open");
                return false;
            }
        });
        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());
        });
        $("#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" class="ui-icon ui-icon-search" style="float: left;padding-left: 5px; padding-top:1px"></span>meeting room</a></div></td><td><span class="fc-header-space"></span></td>');
    });
</script>
<style type='text/css'>
    .ui-datepicker
    {
        width: 23em;
        padding: .2em .2em 0;
        font-size: 70%;
        display: none;
    }
    #calendar
    {
        width: 900px;
        margin: 0 auto;
    }
    #loading
    {
        top: 0px;
        right: 0px;
    }
    .tooltip
    {
        padding-bottom: 25px;
        padding-left: 25px;
        width: 100px !important;
        padding-right: 25px;
        display: none;
        background: #999;
        height: 70px;
        color: red;
        font-size: 12px;
        padding-top: 25px;
        z-order: 10;
    }
    .ui-timepicker-div .ui-widget-header
    {
        margin-bottom: 8px;
    }
    .ui-timepicker-div dl
    {
        text-align: left;
    }
    .ui-timepicker-div dl dt
    {
        height: 25px;
        margin-bottom: -25px;
    }
    .ui-timepicker-div dl dd
    {
        margin: 0 10px 10px 65px;
    }
    .ui-timepicker-div td
    {
        font-size: 90%;
    }
    .ui-tpicker-grid-label
    {
        background: none;
        border: none;
        margin: 0;
        padding: 0;
    }
    .ui-timepicker-rtl
    {
        direction: rtl;
    }
    .ui-timepicker-rtl dl
    {
        text-align: right;
    }
    .ui-timepicker-rtl dl dd
    {
        margin: 0 65px 10px 10px;
    }
</style>
</head>

第三步，在body中声明相关的Div，显示日历以及新增事件的窗口

<body>
    <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">
            <div class="sysdesc">
                </div>
            <div class="rowElem">
                <label>
                    预约人:</label>
                <input id="name" name="name" />
            </div>
            <div class="rowElem">
            <label>
                    电话：</label>
                <input id="phone" name="phone"/>
            </div>
            <div class="rowElem">
                <label>
                    标题:</label>
                 <input id="title" name="title" />
            </div>
            <div class="rowElem">
                <label>
                    开始时间:</label>
                <input id="start" name="start"/>
            </div>
            <div class="rowElem">
                <label>
                    结束时间:</label>
                <input id="end" name="end" />
            </div>
            <div class="rowElem">
                <label>
                    费用:</label>
                <input id="fee" name="fee"/>
            </div>
            <div class="rowElem">
                <label>
                    备忘内容:</label>
                <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>
</body>
</html>

至此前天页面已经设计完成，后面将会带来后台页面代码的设计....

原文链接：https://www.f2er.com/ajax/165002.html

关于fullcalendar里显示Ajax后台返回xml格式的events(1)

猜你在找的Ajax相关文章