Fullcalendar的使用（SpringMVC ajax）
1.目的
以日历的实现显示各种事件(event)
fullcalendar官网
2.步骤
2.1 引入资源文件
2.2 html代码
你只需要一个div ，把日历放到这个div里就行了， 当然样式需要用各种class定义
2.3 js代码
通过ajax请求动态获取数据
//begin 初始化日历
initCalendar : function(){
var prevOrNext="now";
/* initialize the calendar
-----------------------------------------------------------------*/
$('#studentCalendar').fullCalendar({
locale: "zh-cn",
header: {
left: 'month,agendaWeek,agendaDay',
center: 'title',
right: 'prev,today,next'
},
select: function (start, end) {
// 隐藏操作按钮
planExecuteIndex.hideBtn()
},
selectable: true,
editable: true,
selectHelper: true,
eventLimit: true,
droppable: false, // this allows things to be dropped onto the calendar
// 日程数据
events: function (start, end, timezone, callback) {
var beginDate=start;
$("#studentCalendar").fullCalendar('removeEvents');
$.ajax({
url: 'teachContent/showCourseOfStudentAsCalendar?firstDayDate='+beginDate,
dataType: 'json',
type: 'post',
success: function (teachContent) {
// 获取当前月的数据
var events = [];
if (teachContent != null) {
var len = teachContent.length;
for (var i = 0; i < len; i++) {
var ifBelongTOMyself = 0;
// 背景颜色
var color = "";
// 课程状态
var ifSigned = teachContent[i].ifStudentSignedIn;
var status="unsigned";
if (ifSigned ==null || ifSigned=="") {
//未上课
color = COLOR_RED_TRANSPARENT_9;
} else {
//已上课COLOR_GREEN_TRANSPARENT_9
status="signed";
color = COLOR_GREEN_TRANSPARENT_9;
}
var scheduleDate = planExecuteIndex.timeFormate(teachContent[i].classTime);
events.push({
id: teachContent[i].contentId,
title: teachContent[i].contentName,
start: scheduleDate,
color: color,
status: status,
})
;
}
}
callback(events);
}
});
},
});
},//end 初始化日历