这个是fullcalendar插件制作的排班页面，左边新建一系列组和组员，可以将人员直接拖拽至右边的日历上，不同组以颜色区别。

这个是将上面的排班内容用zabuto_calendar插件显示出来，黄色区域代表今天你有值班。

看了文档的话，其实这些都很简单。难点是一些逻辑上的判断，当然如果你执行实现简单的增删改以及显示，那看下面这段代码足以。这里先共享我的汉化及属性设置代码：

$('#calendar_arrangement').fullCalendar({
header: {
left: 'prev today next ',
center: 'title',
right: '' month,agendaWeek,agendaDay
},
weekMode: 'liquid',
editable: true,
droppable: true,
dragOpacity: {
'': .6
},
buttonText: {
today: '本月',
month: '月',
agendaWeek: '周',
agendaDay: '日'
},
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
firstDay: 1,
titleFormat: {
month: 'yyyy年MMMM',
week: "yyyy/MMM/d{ '— '[ yyyy/][MMM/]d}",
day: 'yyyy/MMM/d dddd'
},
columnFormat: {
month: 'ddd',
week: 'M/d ddd',
day: 'M/d dddd'
},
allDayText: '全天',


//获取数据后显示在fullcalendar页面
events: function(start, end, callback) {
var fstart = $.fullCalendar.formatDate(start, "yyyy-MM-dd");
var fend = $.fullCalendar.formatDate(end, "yyyy-MM-dd");
$.ajax({
type: "post",
url: "",//我是用ajax获取后台数据的，这里填写地址
dataType: "json",
data: {
start: fstart,
end: fend
},
success: function(data) {
if (data) {
var event = [];
$.each(data, function(i) {
event.push({
_id: data[i].event_id,
title: data[i].title,
start: data[i].start,
end: data[i].end,
allDay: true
});
});
callback(event);
}
}
});
},


//点击时触发
eventClick: function(event) {

},
//移动时触发
eventDrop: function(event) {

},


//拉伸时触发
eventResize: function(event) {

},
//排班时触发
drop: function(date, allDay) {

}
});


});

具体的属性的含义以及事件操作方法我就不标注了，可以看下面文档：