首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery fullcalendar 台历日程插件使用

2012-09-07 
jquery fullcalendar 日历日程插件使用先上效果:(今天好像传不了图片,下次补)前台代码:!DOCTYPE html PUB

jquery fullcalendar 日历日程插件使用

先上效果: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"}]


 

热点排行