FullCalendar结合java springMVC

FullCalendar开源非常好用，刚开始接触，做了几个简单的功能，现将它记载下来，方便以后查找。

前端js

公司在miniui 的基础上用到了非常多的js，一开始把封装好的js引入一直冲突，只能将用到的js全部贴进来，这样才把冲突的问题搞定了，fullcalendar的js是最下面的三个。

第一个实现的功能是将数据展示出来

后端代码：

public String calendarEvents() {
String sql = "select * from taskinfo";
List<Taskinfo> list = service.findList(sql, Taskinfo.class);
StringBuilder sb = new StringBuilder();
sb.append("[");
for (Taskinfo task : list) {
sb.append("{\"id\":\"" + task.getRowguid() + "\"");
sb.append(",\"title\":\"" + task.getTaskname() + "\"");
sb.append(",\"start\":\"" + task.getOrdertime() + "\"");
sb.append(",\"end\":\"" + task.getPlanendtime() + "\"");
sb.append("},");
}
sb.setLength(sb.length() - 1);
sb.append("]");


return sb.toString();
}

返回拼接好的字符串给前台

前台代码：

<div id="wrap" region="center" border="false" style="" >  
  <div style="">  
   <div id='calendar' align="center">  
    </div>  
  </div>  
</div>

下面是用来控制日程的大小，调解width就可以了

<style>
body {
margin-top: 0px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
width: 800px;
margin: 0 auto;
}
</style>

下面重要的来了

<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header : {
left : 'prev,next today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
editable : false,
selectable : true,
selectHelper : true,
//allDayDefault:false,//是否全天还是按小时显示
       eventClick: function(calEvent, jsEvent, view) { 
        epoint.openDialog('', '../taskinfo/tasktabbaseinfo3?taskguid='+calEvent.id+'&amp;isDetail=true',
        searchData, {
'width' : 800,
'height' : 800
});
       } ,
events :  function(start,end, callback){
$.ajax({
url:'scheduleaction.action?cmd=calendarEvents',
 cache:false,
  dataType: 'json',
   success:function(doc){
    var resultCollection = jQuery.parseJSON(doc.custom);
    $("#calendar").fullCalendar('removeEvents');// 
    $.each(resultCollection, function (index, term) {
      $("#calendar").fullCalendar('renderEvent', term, true);
      });
          },
             error: function() {
                   alert('there was an error while fetching events!');
               },
             color:'yellow',// 背景色
          textColor:'black'// 文字颜色
});
}
 
});
function searchData() {
}


});
</script>

events方法是调用后台返回数据

eventClick 方法是弹出详情页面，如下图所示：

另外fullcalendar 还支持拖动等炫酷的功能，因为我所做的并不涉及到这些，等日后慢慢完善

<style>
body {
margin-top: 0px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}


#calendar {
width: 800px;
margin: 0 auto;
}
</style>