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>