如果你打算开发日程表,签到表之类的asp.net网页,那么系统自带的Calendar控件显然是无法满足要求的,如果你有一点jQuery基础,那么一定会寻找一款jQuery插件,本文就是记录fullcalendar怎么用的。
fullcalendar官方网站:http://arshaw.com/fullcalendar/
基础的功能就不说了,本文只说如何动态从数据库里面加载日历项,首先从网站上面下载fullcalendar的源代码,然后写一个handle处理文件,在显示日历的页面里面写上
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
editable: false,
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
dayNamesShort: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
events: "handle.aspx",
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'newwindow', 'width=700,height=600');
return false;
}
});
});
有了这段代码,日历页面加载的时候就会自动加载handle.aspx页面,然后会把当前可以看到的日期以参数的形式发送回去。如handle.aspx?start=1214121541&end=1214121415&_=15464213,最后一个参数是个随机数,以防ajax回传的时候缓存不刷新数据。
可以在handle.aspx里面用如下代码把开始结束日期转换成DateTime,
DateTime dts = (new DateTime(1970, 1, 1)).AddHours(8);//1970-1-1 08:00:00
//加上秒数
DateTime start = dts.AddSeconds(double.Parse(Request.QueryString["start"]));
DateTime end = dts.AddSeconds(double.Parse(Request.QueryString["end"]));
每次点击日历上面的上一个月,下一个月按钮就会自动执行handle.aspx页面,无需编写额外代码,非常好用。