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

I am building an application in which i am using the famous fullCalendar. Now i need to populate my calendar using the values that are present in my database. I am trying to do it using an AJAX call. But its not working . Any help would be appreciated.

我正在构建一个应用程序，其中我使用了著名的fullCalendar。现在我需要使用数据库中的值填充日历。我正在尝试使用AJAX调用来实现它。但这行不通。如有任何帮助，我们将不胜感激。

This is my jsp . The one which im using to display my calendar.

这是我的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 个解决方案

#1

Try using eventSources instead of events, this considering your function is in fact returning any events. Why not use $.Ajax({}) instead of $.post? It will make your life easier.

尝试使用eventsource而不是events，考虑到您的函数实际上是返回任何事件。为什么不使用$.Ajax({})而不是$.post呢?这会让你的生活更轻松。

Here's an example of how i do it:

这里有一个例子:

EventSources array.

eventsource数组。

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

In Fullcalendar call I have this:

在Fullcalendar call中，我有:

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

This works for me, notice that I'm returning JSON so if you are returning XML for example you will have to iterate the XML.

这对我来说很有用，注意到我返回的是JSON所以如果你返回的是XML，那么你就需要遍历XML。

Also if your events returns Dates different from the accepted they wont be mapped in the calendar, ( yyyy-mm-dd ) works.

此外，如果您的事件返回的日期与所接受的日期不同，那么它们不会被映射到日历中，(yyyyyyyyy -mm-dd)可以工作。

Good Luck

祝你好运

#1