fullcalendar是个很强大的日历控件，可以用它进行排班、排会议、拍任务，很直观，用户体验良好。

看下效果图：

 

#parse("index/head.vm")
      
      
     
      
     
     
     
     
     
          
          
      
    
          
      
    
       
    
       
      
    
          
      
    
       
      
        
          
        
        
        
         日期:             
                 
        
        
        
         班次:             
                             请选择班次                    #foreach($!list in $!listDutyOrder)                    $!{list.orderName}                    #end                     
        
        
        
         班组:             
                     
                 
        
        
        
         备注:             
         $!{dutyScheduling.remark}         
        
        
        
 
        
        
        
 
        
        
        
            
         
            
          
            
         
        
        
    
       
    
      
     

后台取日历上数据的canlendarModel方法（springMVC）：

@ResponseBody    @RequestMapping(value = "canlendarModel")    public List
     
       canlendarModel(ModelMap model,Date timeStart,Date timeEnd) throws Exception {        List
      
        listDutyOrder = dutyOrderService.findAll();        model.put("listDutyOrder", listDutyOrder);        Date[] dd = {timeStart,timeEnd};        List
       
         listMonthDutySchedulings = dutySchedulingService.findBetweenTimes(dd);        //String jsonListMonthDutySchedulings =  JsonUtil.JsonFromObject(listMonthDutySchedulings);        //model.put("listSize", listMonthDutySchedulings.size());        //model.put("jsonListMonthDutySchedulings", jsonListMonthDutySchedulings);        return listMonthDutySchedulings;    }
       
      
     

后台代码没什么，要点在于页面上的

var calendar =$('#calendar').fullCalendar({

。。。

　　events:  function(start, end , callback){//生成日历

     。。。。

　　}

}

　　此处start和end为当前加载进来的日历的起始时间和结束时间，需要将这两个时间传到后台取数据。这里我之前翻了个错误，开始我同步取数据，即页面加载时候，把当天所在月的数据都取出来。当前月份是显示出来了，可是新的问题是页面右上角的 prev: '上一月',next: '下个月'，不知道怎样再去跟后台交互了！查阅大量资料，终于被我发现这里问题所在，这个地方一定要异步去取，把当前日历（一般显示的是一个月加月前月后几天）的起始、结束时间传到后台。这样做之后，点击prev: '上一月',next: '下个月'，它会自己再把新的月份的起始、结束时间传到后台，重新加载var calendar =$('#calendar').fullCalendar({。。});。

　　此处还有个地方要注意，当加载完页面之后，左上角有个按日期查询当日排班（任务）的功能。如果选的日期是当前日历月份（即桌面上显示7*6的格子）范围以内的，它会定位到直接定位到当天，而数据则是之前已经加载好的；如果选的日期不在当前日历月份范围以内的，它会再调用var calendar =$('#calendar').fullCalendar({。。});。传新的时间去后台取数据，这一点设计的非常好。

events:  function(start, end , callback){//生成日历

     。。。

start: doc[i].startTime,

end: doc[i].endTime,

}

　　上面这个是生成日历项的地方，主要就是这两个参数，直接决定在日历上面显示的任务的起始和结束时间，如果不在同一天，那就会跨格子显示。

我传的是一个String格式 yyyy-MM-dd HH:mm:ss 的日期，没问题，fullcalendar可以识别。

　　另外fullcalendar还支持日历的拖拽等，还有很多别的有意思的方法，还待研究。