如何使用我的数据库值填充fullCalendar?

时间:2013-10-23 08:46:57

标签: ajax fullcalendar

我正在构建一个我正在使用着名的fullCalendar的应用程序。现在我需要使用数据库中存在的值填充我的日历。我正在尝试使用AJAX调用。但它不起作用。任何帮助将不胜感激。

这是我的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>

1 个答案:

答案 0 :(得分: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)。

祝你好运