当前位置: 代码迷 >> Web前端 >> jquery fullcalendar 台历日程插件使用
  详细解决方案

jquery fullcalendar 台历日程插件使用

热度:615   发布时间:2012-09-07 10:38:15.0
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"}]


 

  相关解决方案