下面是一个.NET webForm的具体列子
注意引用了artDialog 以及异步请求数据的json格式字符串
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link href='fullcalendar/fullcalendar.css' rel='stylesheet' /> <link href='fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' /> <script type="text/javascript" src='fullcalendar/lib/jquery-1.10.2.min.js'></script> <script type="text/javascript" src='fullcalendar/lib/jquery-ui.custom.min.js'></script> <script type="text/javascript" src='fullcalendar/fullcalendar.min.js'></script> <script type="text/javascript" src="artDialog/artDialog.source.js?skin=default"></script> <script type="text/javascript" src="artDialog/plugins/iframeTools.source.js"></script> <script src="urlParams.js" type ="text/javascript"></script> <script type="text/javascript"> var newdate;//定义一个时间 var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', //不显示则为空 right: 'month,agendaWeek,agendaDay' }, monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], today: ["今天"], firstDay: 1, buttonText: { today: '今天', month: '月', week: '周', day: '日' }, editable: false, timeFormat: 'HH:mm', axisFormat: 'HH:mm', viewDisplay: function(view) { newdate=$.fullCalendar.formatDate(view.start,"yyyy-MM-dd HH:mm:ss"); }, events: function (start, end, callback) { var t1=$.fullCalendar.formatDate(start, "yyyy-MM-dd hh:mm:ss") var t2=$.fullCalendar.formatDate(end, "yyyy-MM-dd hh:mm:ss") $.ajax({ type: "get", async: false, url: "GetDutyAction.ashx?tmp=" + (new Date()).valueOf(), data: { start: t1, end: t2 }, success: function (data) { var date = jQuery.parseJSON(data); //此处虽然allDay有值但是 由于是字符串false 而不是关键字false 默认显示整日 callback(date); <!-- 还有一种加载方式 obj=jQuery.parseJSON(data); for(var i=0;i<obj.length;i++) { var newobj = new Object(); newobj.title=obj[i].title .... $('#calendar').fullCalendar('renderEvent', newobj); //核心的更新代码 } --> } }); }, dayClick: function (date, allDay, jsEvent, view) { var obj = new Object(); art.dialog.open('DutyEdit.aspx', { //duty自由定义只需要设置需要返回值的一些控件 title: '添加值班', lock: true, 550, height: 340, fixed: true, //固定定位 opacity: 0.6, // 透明度 // 在open()方法中，init会等待iframe加载完毕后执行 init: function () { var iframe = this.iframe.contentWindow; var top = art.dialog.top;// 引用顶层页面window对象 if(date.getDate()==1 ) { iframe.document.getElementById('tr_ld').style.display=""; } var start = iframe.document.getElementById('txt_date'); start.value = $.fullCalendar.formatDate(date, "yyyy-MM-dd"); }, okVal: '提交值班', ok: function () { var iframe = this.iframe.contentWindow; if (!iframe.document.body) { alert('iframe还没加载完毕呢'); return false; }; var amuser=iframe.document.getElementById('txt_AMUser').value; var starttime = iframe.document.getElementById('txt_date').value; $.ajax({ type: "get", async: false, url: "SetDutyAction.ashx", data: { user:amuser,start:starttime,type:'0'}, success: function (data) { obj=jQuery.parseJSON(data); } }); //此处我是需要插入多条值班信息 if(obj.length>0) { for(var i=0;i<obj.length;i++) { $('#calendar').fullCalendar('renderEvent', obj[i]); //核心的更新代码 } } $('#calendar').fullCalendar('unselect'); art.dialog({ title: '提醒', 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩 content: '值班添加至后台！', icon: 'face-smile', time: 1 }); return true; }, cancel: true }); }, eventClick: function (calEvent, jsEvent, view) { art.dialog.open('DutyEdit.aspx', { title: '更新日程', lock: true, 550, height: 340, //background: '#600', // 背景色 opacity: 0.6, // 透明度 // 在open()方法中，init会等待iframe加载完毕后执行 init: function () { var iframe = this.iframe.contentWindow; var top = art.dialog.top;// 引用顶层页面window对象 iframe.document.getElementById('txt_date').value=$.fullCalendar.formatDate(calEvent.start, "yyyy-MM-dd"); }, okVal: '修改值班', ok: function () { var iframe = this.iframe.contentWindow; if (!iframe.document.body) { alert('iframe还没加载完毕呢') return false; }; calEvent.dutyuser=iframe.document.getElementById('txt_User').value ; calEvent.title="上午值班："+calEvent.dutyuser; calEvent.dutyUid=iframe.document.getElementById('Hidden1').value if (calEvent.dutyuser == '') { alert("人员不能为空"); return false; } $.ajax({ type: "get", async: false, url: "SetDutyAction.ashx", data: { id:calEvent.id,name:calEvent.dutyuser,userid:calEvent.dutyUid,type:'1'}, success: function (data) { } }); $('#calendar').fullCalendar('updateEvent', calEvent); ////弹出提示 art.dialog({ title: '提醒', 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩 content: '值班已更新！', icon: 'face-smile', time: 1 }); return true; }, cancel: true, //删除日程，保存到数据库 button: [{ name: '删除日程', callback: function () { $.ajax({ type: "get", async: false, url: "SetDutyAction.ashx", //.net ajax异步请求删除数据库数据 data: { id:calEvent.id,type:'2'}, success: function (data) { } }); $('#calendar').fullCalendar('removeEvents', calEvent.id); art.dialog({ title: '提醒', 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩 content: '值班已删除！', icon: 'face-smile', time: 1 }); return true; } }] }); } }); }); </script> <style type="text/css"> body { margin-top: 40px auto; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #calendar { width: 900px; margin: 0 auto; } </style> </head> <body> <form id="form1" runat="server"> <div ><span id="title" style="font-size:25px; font-weight:bolder;">值班表</span></div> <div id='calendar'></div> </form> </body> </html>
DataSet ds = db.ExecuteDataSet(dbcom); if (ds.Tables[0].Rows.Count > 0) { DateTime start1 = DateTime.Parse(dr["StartDate"].ToString()); DateTime end1 = DateTime.Parse(dr["EndDate"].ToString()); result += "{"id":"" + dr["ID"].ToString() + "","title":"" + title + "","dutyuser":"" + dr["DutyUser"].ToString() + "","dutyUid":"" + dr["DutyUserID"].ToString() + "","; result += ""start":"" + start1.ToString("yyyy-MM-dd hh:mm:ss") + "","end":"" + end1.ToString("yyyy-MM-dd hh:mm:ss") + "","status":"" + dr["Status"].ToString() + "","allDay":"false"" + color + "},"; } result = result.TrimEnd(',') + "]"; }
