2013-10-23 34 views
1

我正在構建一個應用程序,使用着名的fullCalendar。現在我需要使用數據庫中存在的值填充我的日曆。我正在嘗試使用AJAX調用。但它不工作。任何幫助,將不勝感激。如何使用我的數據庫值填充fullCalendar?

這是我的jsp。即時通訊用來顯示我的日曆。

<!DOCTYPE html> 
<html> 
<head> 
<link href='css/fullcalendar.css' rel='stylesheet' /> 
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' /> 
<script src='js/jquery.min.js'></script> 
<script src='js/jquery-ui.custom.min.js'></script> 
<script src='js/fullcalendar.min.js'></script> 
<link href="jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" media = "all"/> 
<link rel='stylesheet' type='text/css' href='cssdata/fullcalendar.css' /> 
<script src="js/jquery-1.9.0.js"></script> 
<script src="js/jquery-ui-1.10.0.custom.min.js"></script> 
<script type='text/javascript' src='js/fullcalendar.js'></script> 
<pre> 
<script> 

$(document).ready(function() { 
    getEvents(); 
     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 
     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,basicWeek,basicDay' 
      }, 
      editable: true, 
      events: [ getEvents() 
         /* { 
        title: 'All Day Event', 
        start: new Date(y, m, 1) 
       }, */ 
      ] 
     }); 

    }); 

    function getEvents(){ 
     alert("hi"); 
     $.post("http://localhost:8080/S360Portal/eventAjax.action", {}, 
      function(data){ 
      alert("Hello"); 
      alert(data); 
      }); 
    } 
</script> 
<style> 
    body { 
     margin-top: 40px; 
     text-align: center; 
     font-size: 14px; 
     font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
     } 

    #calendar { 
     width: 900px; 
     margin: 0 auto; 
     } 

</style> 
</head> 
<body> 
<div id='calendar'></div> 
</body> 
</html> 

回答

3

嘗試使用eventSources而不是事件,這考慮您的函數實際上是返回任何事件。爲什麼不使用$.Ajax({})而不是$.post?它會讓你的生活更輕鬆。

下面是我如何做到這一點的例子:

EventSources陣列。

var sources = { 
    sourceone: { 
     url: ajaxcallURL(), 
     type: 'POST', 
     data: { 'year': y }, 
     cache: false,  //this is optional 
     color: '#6C92A8', //this is optional 
     textColor: 'white' //this is optional 
    } 
} 

Fullcalendar呼叫我有這樣的:

var calendar = $('#calendar').fullCalendar({ 
... 
eventSources: [sources.sourceone], 
... 
}); 

這對我的作品,注意到,我返回JSON所以如果你是例如返回XML,你將不得不遍歷XML 。

此外,如果您的事件返回的日期與接受的日期不同,它們將不會在日曆中映射,(yyyy-mm-dd)起作用。

好運

+1

我用AJAX,它工作正常! – struts2

相關問題