jquery fullcalendar 日历日程插件使用
前台代码：
[html]
<!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>
后台返回数据：
[csharp]
/// <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等，根据需要返回）：
[plain]
[{"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"}]
