最近工作，需要做一个日历来排公司日程。用到了fullcalender这个插件。虽然功能很强大，无奈例子太少走了许多弯路。所以在这里把这个插件的配置方式贴出来，给要用它做日程管理的同学一些帮助。
以下是这个插件的配置，这个插件的js文件网上有。demo也能找到但是功能不全，可以参照一下我的配置。
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
firstDay: 1,
editable: true,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
theme: false,
//这个事件是 点击插件里面的单条数据时触发
eventClick: function (calEvent, jsEvent, view) {
//调用弹窗 这里的 calEvent.id是你给插件绑定id时候的数据
modalOpen({
id: "Form",
title: "修改",
url: "/PlanModule/PZKArrangeShift/Form?id=" + calEvent.id,
width: "700px",
height: "510px",
});
},
//这个事件是 当你点击日期单元格时触发
dayClick: function (date, allDay, jsEvent, view) {
//这个能帮助你获取当前得到的 点击日期
var selDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
sessionStorage["shiftName"] = ShiftNames;
$.modalOpen({
id: "Form",
title: "新增",
url: "/PlanModule/PZKArrangeShift/Form?date=" + selDate,
width: "700px",
height: "510px",
callBack: function (iframeId) {
top.frames[iframeId].submitForm();
}
});
},
//这个事件 是当你点击页面的 上一页 下一页 月 周 日 时触发 这里是当月份发生变化时 加载一个月的数据
viewDisplay: function (view) {
//初次进入
if (f == 0) {
var date = new Date;
year = date.getFullYear();
month = date.getMonth() + 1;
yy = year;
mm = month;
f = 1;
}
//其他 点击页面上的其他操作判断 日期是否与当月不同 不同则重新加载数据
else {
var name = document.getElementsByTagName("h2");
var yy0 = name[1].innerHTML.substring(0, 4);
var mm0 = name[1].innerHTML.substring(5, 7);
if (parseInt(year) != parseInt(yy0) || parseInt(month) != parseInt(mm0)) {
year = parseInt(yy0);
month = parseInt(mm0);
yy = parseInt(yy0);
mm = parseInt(mm0);
}
}
// ajax获取 当前月份数据
$.ajax({
url: "/PlanModule/PZKArrangeShift/LoadCalender",
data: { key: ShiftNames, Date: yy + "-" + mm },
dataType: "json",
type: "post",
async: false,
success: function (data) {
var res = eval(data);
events = [];
$.each(res, function (i, d) {
var t = d.DATE.substring(0, 10);
var start = t + " " + d.STARTTIME;
var end = t + " " + d.ENDTIME;
events.push({
id: d.ARRANGEID,
title: d.ITEM,
start: start,
end: end,
allDay: false
});
});
//清除原来加载进去的数据 不然会出现很多重复加载的数据
$("#calendar").fullCalendar('removeEvents');
//添加json对象
$.each(events, function (index, term) {
$("#calendar").fullCalendar('renderEvent', term, true);
});
}
});
},
});