FullCalendar：从休眠表开始加载事件

Question

我正在尝试加载存储在数据库中的事件。 我在 arshaw 的 FullCalendar 网站上阅读 decumentation 但没有成功。 在这里你可以看到我的用户详细信息网站，在那里你可以看到带有事件的表格

<table class="table table-bordered table-hover table-striped">
    <thread>
        <tr>
            <th>Title</th>
            <th>Description</th>    
            <th>Start Date</th> 
            <th>End Date</th>
        </tr>
    </thread>
    <tbody>
        <c:forEach items="${user.events}" var="events">
        <tr>
            <td>${events.name}</td>
            <td>${events.description}</td>
            <td>${events.startDate}</td>
            <td>${events.endDate}</td>
        </tr>
        </c:forEach>
    </tbody>
</table>

在我的 InitDatabaseService 中存储了一个事件：

Events eventNr1 = new Events();
    eventNr1.setName("sometitle");
    eventNr1.setUser(userAdmin);
    eventNr1.setStartDate("2014, 07, 25");
    eventNr1.setEndDate("2014, 07, 26");
    eventNr1.setDescriptionField("texttexttexttext");
    eventsRepository.save(eventNr1);    

这运作良好。但我不知道如何将此事件添加到日历而不是表格。 这是我在 schedule.html 中的完整日历脚本：

<script type="text/javascript">
        $(function() {


            /* initialize the calendar
             -----------------------------------------------------------------*/
            //Date for the calendar events (dummy data)
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev next',
                    center: 'title,today',
                    right: 'month,agendaWeek,agendaDay'
                },
                buttonText: {//This is to add icons to the visible buttons
                    prev: "<span class='fa fa-caret-left'></span>",
                    next: "<span class='fa fa-caret-right'></span>",
                    today: 'today',
                    month: 'month',
                    week: 'week',
                    day: 'day'
                },
                aspectRatio: 2,
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    $('#myModal').modal('show'); 

                    var title = prompt('Event Titlesss:');
                    if (title) {

                        calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            },
                            true // make the event "stick"
                        );
                    }
                    calendar.fullCalendar('unselect');
                },

                editable: true,
                theme: false,
                //Random default events


                events: [
                   // <c:forEach items="${user.events}" var="events">
                    //title: '${events.name}',
                    //start: new Date('${events.startDate}'),
                    //backgroundColor: "#f56954", //red
                    //borderColor: "#f56954"//red






                    {
                        title: "All Day Event",
                        start: new Date(y, m, 1),
                        backgroundColor: "#f56954", //red
                        borderColor: "#f56954" //red
                    },
                    {
                        title: "Long Event",
                        start: new Date(y, m, d - 5),
                        end: new Date(y, m, d - 2),
                        backgroundColor: "#f39c12", //yellow
                        borderColor: "#f39c12" //yellow
                    },
                    {
                        title: 'Meeting',
                        start: new Date(y, m, d, 10, 30),
                        allDay: false,
                        backgroundColor: "#0073b7", //Blue
                        borderColor: "#0073b7" //Blue
                    },
                    {
                        title: 'Lunch',
                        start: new Date(y, m, d, 12, 0),
                        end: new Date(y, m, d, 14, 0),
                        allDay: false,
                        backgroundColor: "#00c0ef", //Info (aqua)
                        borderColor: "#00c0ef" //Info (aqua)
                    },
                    {
                        title: 'Birthday Party',
                        start: new Date(y, m, d + 1, 19, 0),
                        end: new Date(y, m, d + 1, 22, 30),
                        allDay: false,
                        backgroundColor: "#00a65a", //Success (green)
                        borderColor: "#00a65a" //Success (green)
                    },
                    {
                        title: 'Click for Google',
                        start: new Date(y, m, 28),
                        end: new Date(y, m, 29),
                        url: 'http://google.com/',
                        backgroundColor: "#3c8dbc", //Primary (light-blue)
                        borderColor: "#3c8dbc" //Primary (light-blue)
                    }
                  //  </c:forEach> 
                ],


            });


        });
    </script>

我尝试使用 foreach 添加所有这些事件，但没有成功。

那么我该怎么做呢？ :)

Answer 1

您可以使用 eventSources 属性并将其与您的自定义 url 服务器一起提供以使用 json feed 填充事件

您可以在官方文档中找到有关 json feed 的更多信息：

http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/