asp.net jQuery日历插件fullcalendar详解

如果你打算开发日程表,签到表之类的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页面,无需编写额外代码,非常好用。

你可能感兴趣的:(jquery,function,calendar,asp.net,jquery插件,日历)