JQuery FullCalendar(一)
FullCalendar官网:http://arshaw.com/fullcalendar
FullCalendar中文API:http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html
FullCalendar日历插件说明文档http://www.helloweba.com/view-blog-231.html
一、准备相关JS文件
<link href="CSS/fullcalendar.css" rel="stylesheet" type="text/css" /> <script src="JS/jquery-1.9.1.js" type="text/javascript"></script> <script src="JS/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <script src="JS/fullcalendar.min.js" type="text/javascript"></script>
二、JS代码
FullCalendar通过events的设置向数据源请求数据,要求返回的JSON数据格式如下
[ { "id": 1, "title": "正常上班", "start": "2013/11/19 17:26:54", "end": "2013/11/19 17:26:54", "url": null, "allDay": "True", "color": "#666" } ]
待会根据这个格式,设计数据库
fullCalendar工具:formatDate
调用方法:$.fullCalendar.formatDate(time,formatstring)
events设置数据源,同时可以传递start,end两个参数,该视图的第一天日期和最后一天日期(并非该月或者星期)
<script type="text/javascript"> $(function () { $('#calendar').fullCalendar({ header: {//set header info
left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, firstDay: 7, editable: true, //send startParam,endParam to json.ashx events: function (start, end, callback) { $.getJSON("json.ashx", { "start": $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss"), "end": $.fullCalendar.formatDate(end,"yyyy-MM-dd HH:mm:ss") }, function (json) { callback(json); }); }
});
});
</script>
三、HTML代码
<div id='calendar'></div>
四、数据库设计
创建数据表calendar表,包含字段:
id(int ,not null),
title(nvarchar(200),not null),
start(datetime, not null),
end(datetime, defaultValue:1970/1/1 8:00:00),
url(nvarchar(200)),
allDay(bit),
color(nvarchar(200) ,defaultValue:#666),
title和start是必要的字段
五、后台json.ashx,返回json数据
DateTime start = Convert.ToDateTime( context.Request["start"]); DateTime end = Convert.ToDateTime( context.Request["end"]); AddNewsDataContext db = new AddNewsDataContext(); var res = from i in db.calendar //注意时间的开闭区间
where i.start >= start && i.start <= end || i.end >= start && i.end <= end
select new { id = i.Id, title=i.title, start = i.start.Value.Year + "/" + i.start.Value.Month + "/" + i.start.Value.Day + " " + i.start.Value.Hour + ":" + i.start.Value.Minute + ":" + i.start.Value.Second , end = i.end.Value.Year + "/" + i.end.Value.Month + "/" + i.end.Value.Day + " " + i.end.Value.Hour + ":" + i.end.Value.Minute + ":" + i.end.Value.Second, url=i.url.ToString(), allDay=i.allDay, color=i.color.ToString() }; JavaScriptSerializer jss = new JavaScriptSerializer(); string json=jss.Serialize(res); context.Response.Write(json);
六、效果
allDay为false的时候显示时间