how do i populate the fullCalendar using my database values?

问题

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.

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

    <!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:

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.

Here's an example of how i do it:

EventSources array.

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:

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.

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

Good Luck

来源：https://stackoverflow.com/questions/19537009/how-do-i-populate-the-fullcalendar-using-my-database-values

标签

ajax

fullcalendar