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" 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>