这个是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) {
                
            }
        });


    });

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