.net+sql+fullcalendar开发日程管理

最近在做一个OA，必不可少的需要用到日程管理。做了一个例子，已做展示。
先上个效果图。

 

 

 

核心代码：
1.js，css引用

 

2,日程数据读取并显示到页面上。
$(function () {
ShowCalendar();
});
function ShowCalendar() {
//每一次渲染数据时，清空页面老的数据
document.getElementById("calendar").innerHTML="";
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var dataT;
$.ajax({
type: "post",
url: "../Controllers/OpenPublic/Calendars.ashx?ActionType=select",
success: function (data) {
var events = [];
var obj = eval(data);
//将后台返回的json数据，进行重组。
for (i in obj) {
events.push({
id: obj[i].id,//日程ID
title: obj[i].title,//日程标题
start: new Date(obj[i].start),//开始时间
end: new Date(obj[i].end),//结束时间
color: obj[i].color,//背景颜色
allDay: Boolean(obj[i].allDay)//是否为全体任务
});
}
$('#calendar').fullCalendar({
dayClick: function (date, event, jsEvent, view) {
var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd"); //选择当前日期的时间转换
OpenCalendar(selectdate);//日程空白处点击事件。
},
eventClick: function (event) {
alert('ss');//日程数据点击时间
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
firstDay: 1,
editable: true,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
events: events
});
}
});
}
3.HTML
<div id="main" style=" 100%">
<h2 class="top_title">
新建日程</h2>
<div id='calendar'>
</div>
<script>
//点击页面空白处时，弹出输入页面
function OpenCalendar(selectdate) {
layer.open({
type: 2,
title: false,
content: '../OpenInfo/CalendarsInfo.aspx',
area: ['780px', '510px'],
success: function () {
}
});
}
</script>
</div>
4.访问数据库的 一般处理程序就不写，具体情况具体分析，很简单的将获取的数据源变成json格式的字符串输出就好了。