jquery fullcalendar 日历日程插件使用
先上效果:
(今天好像传不了图片,下次补)
前台代码:
<!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"}]