先上效果:
(今天好像传不了图片,下次补)
前台代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link rel="stylesheet" type="text/css" href="css/mycss.css"> <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' /> <script type='text/javascript' charset="utf-8" src='js/jquery-1.7.2.min.js'></script> <script type='text/javascript' charset="utf-8" src='js/jquery-ui-1.8.17.custom.min.js'></script> <script type='text/javascript' charset="utf-8" src='fullcalendar/fullcalendar.min.js'></script> <script type='text/javascript'> function openUrl(id){ try { if(top!=this) { self.parent.addTabRecordView(id); } else { window.open("RecordView.html?id="+id,'XX',' left=0,top=0,width='+ (screen.availWidth - 10) +',height='+ (screen.availHeight-50) ); } } catch(err) { window.open("RecordView.html?id="+id,'XX',' toolbar=yes,status=yes,location=yes,menubar=yes,scrollbars=yes,left=0,top=0,width='+ (screen.availWidth - 10) +',height='+ (screen.availHeight-50) ); } } $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' }, monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], today: ["今天"], //firstDay: 1, buttonText:{ prev: '上一页', next: '下一页', prevYear: '去年', nextYear: '明年', today: '今天', month: '月', week: '周', day: '日' }, editable: false, currentTimezone: 'Asia/Beijing', loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); }, events: "Ajax/AjaxCalendar.asmx/GetRecordNote", eventClick: function(ev) { openUrl(ev.id); //alert(ev.id); }, eventMouseover:function(event, jsEvent, view ) { $(this).css('border-color', 'red'); }, eventMouseout:function(event, jsEvent, view ) { $(this).css('border-color','blue'); } }); }); </script> </head> <body> <div id='calendar' style=" "></div> </body> </html>
后台返回数据:
/// <summary> /// 返回日程表格式内容 /// </summary> /// <param name="start"></param> /// <param name="end"></param> [WebMethod] public void GetRecordNote(string start,string end) { MyOraComm.ConnForOracle cfo=new MyOraComm.ConnForOracle("dbf_connstr"); cfo.OpenConn(); string sql="select id as \"id\",GET_DEPANAME(t.depa) as \"title\",to_char(t.rq,'yyyy-mm-dd') AS \"start\" from record_note t "+ " where to_char(rq,'yyyyMMdd')>='"+TimeStamp.GetTime(start).ToString("yyyyMMdd")+"' and "+ " to_char(rq,'yyyyMMdd')<='"+TimeStamp.GetTime(end).ToString("yyyyMMdd")+"' "+ " order by t.depa"; DataTable dt=cfo.ReturnDataSet(sql,"RECORD_NOTE").Tables[0]; string data=JsonHelper.DataToJson(dt); cfo.CloseConn(); Context.Response.Write(data); }
返回的格式如下(注意,必须是严格的json格式,id,title,start等都是fullcalendar要求的event属性,还有其他属性比如end等,根据需要返回):
[{"id":"2","title":"公司领导","start":"2012-08-15"},{"id":"5","title":"总经理工作部信息班","start":"2012-08-17"},{"id":"20","title":"总经理工作部信息班","start":"2012-08-28"},{"id":"15","title":"总经理工作部信息班","start":"2012-08-24"},{"id":"18","title":"总经理工作部信息班","start":"2012-08-27"},{"id":"3","title":"总经理工作部信息班","start":"2012-08-15"},{"id":"8","title":"总经理工作部信息班","start":"2012-08-21"},{"id":"11","title":"总经理工作部信息班","start":"2012-08-23"},{"id":"1","title":"总经理工作部信息班","start":"2012-08-14"},{"id":"4","title":"总经理工作部信息班","start":"2012-08-16"},{"id":"10","title":"总经理工作部信息班","start":"2012-08-22"},{"id":"7","title":"总经理工作部信息班","start":"2012-08-20"},{"id":"16","title":"综合班","start":"2012-08-25"},{"id":"9","title":"综合班","start":"2012-08-21"},{"id":"17","title":"综合班","start":"2012-08-26"},{"id":"13","title":"综合班","start":"2012-08-23"},{"id":"12","title":"综合班","start":"2012-08-22"},{"id":"6","title":"综合班","start":"2012-08-20"},{"id":"14","title":"综合班","start":"2012-08-24"},{"id":"19","title":"综合班","start":"2012-08-27"},{"id":"21","title":"综合班","start":"2012-08-28"}]