Question

我正在使用FUllCALENDAR CSS模板来设计会议日历。

我有一个名为CalendarController的servlet类。当我运行它时它会让我像这样放弃。

{"events":[{"id":1,"title":"1","start":"2015-11-11 05:30:00.0",
"end":"2015-11-11 06:00:00.0","url":"http://google.com/"},
{"id":2,"title":"1","start":"2015-11-18 06:00:00.0",
"end":"2015-11-18 06:00:00.0","url":"http://google.com/"}, 
{"id":3,"title":"1","start":"2015-11-18 06:00:00.0",
"end":"2015-11-18 06:00:00.0","url":"http://google.com/"}, 
{"id":4,"title":"2","start":"2015-11-19 06:00:00.0",
"end":"2015-11-19 07:00:00.0","url":"http://google.com/"}, 
{"id":5,"title":"2","start":"2015-11-12 06:00:00.0",
"end":"2015-11-12 06:30:00.0","url":"http://google.com/"}, 
{"id":7,"title":"lkj","start":"2015-11-18 06:30:00.0",
"end":"2015-11-18 07:00:00.0","url":"http://google.com/"}, 
{"id":8,"title":"lkj","start":"2015-11-18 06:30:00.0",
"end":"2015-11-18 07:00:00.0","url":"http://google.com/"}, 
{"id":9,"title":"lkj","start":"2015-11-18 06:30:00.0",
"end":"2015-11-18 07:00:00.0","url":"http://google.com/"}, 
{"id":10,"title":"lkj","start":"2015-11-18 06:30:00.0",
"end":"2015-11-18 07:00:00.0","url":"http://google.com/"}, 
{"id":11,"title":"My Topic","start":"2015-11-18 06:00:00.0",
"end":"2015-11-18 07:00:00.0","url":"http://google.com/"}, 
{"id":12,"title":"My Topic","start":"2015-11-19 07:00:00.0",
"end":"2015-11-19 07:30:00.0","url":"http://google.com/"}, 
{"id":13,"title":"My Topic","start":"2015-11-19 07:00:00.0",
"end":"2015-11-19 07:30:00.0","url":"http://google.com/"}, 
{"id":14,"title":"My Topic","start":"2015-11-12 07:00:00.0",
"end":"2015-11-12 07:30:00.0","url":"http://google.com/"}, 
{"id":15,"title":"My Topic","start":"2015-11-12 07:00:00.0",
"end":"2015-11-12 07:30:00.0","url":"http://google.com/"}, 
{"id":16,"title":"My Topic","start":"2015-11-12 07:00:00.0",
"end":"2015-11-12 07:30:00.0","url":"http://google.com/"}, 
{"id":17,"title":"My Topic","start":"2015-11-12 07:00:00.0",
"end":"2015-11-12 07:30:00.0","url":"http://google.com/"}, 
{"id":18,"title":"My Topic","start":"2015-11-11 06:30:00.0",
"end":"2015-11-11 06:30:00.0","url":"http://google.com/"}, 
{"id":19,"title":"My Topic","start":"2015-11-11 05:30:00.0",
"end":"2015-11-11 06:00:00.0","url":"http://google.com/"}, 
{"id":20,"title":"My Topic","start":"2015-11-11 06:00:00.0",
"end":"2015-11-11 07:00:00.0","url":"http://google.com/"}, 
{"id":6,"title":"lhsd","start":"2015-11-18 06:00:00.0",
"end":"2015-11-18 06:30:00.0","url":"http://google.com/"}]}

我通常使用虚拟数据来填充我的fullCalendar.jsp

            $(document).ready(function() {
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    eventRender: function(event, element) {
                        element.bind('dblclick', function() {
                            showDialog('#dialog1');
                        });
                        // alert shows up in linux chrome, but messes up draggable
                    },
                    minTime: '07:00:00',
                    maxTime: '21:00:00',
                    defaultTime: '08am',
                    defaultView: 'agendaWeek',
                    editable: false,
                    eventLimit: true, // allow "more" link when too many events
                    events: [
                        {
                            id: 1,
                            title: 'All Day Event',
                            start: '2015-11-01',
                            textColor: '#63A223',
                            color: 'rgba(122, 214, 29, 0.31)'

                        },
                        {
                            id: 2,
                            title: 'Long Event',
                            start: '2015-11-02',
                            end: '2015-11-05',
                            textColor: '#63A223',
                            color: 'rgba(122, 214, 29, 0.31)'
                        },
                        {
                            id: 3,
                            title: 'Repeating Event',
                            start: '2015-11-07T14:00:00',
                            textColor: '#ce352c',
                            color: 'rgba(255, 0, 0, 0.5)'
                        },
                        {
                            id: 4,
                            title: 'Repeating Event',
                            start: '2015-11-06T13:00:00',
                            textColor: '#ce352c',
                            backgroundColor: 'rgba(255, 0, 0, 0.5)'
                        },
                        {
                            id: 5,
                            title: 'Conference',
                            start: '2015-11-01',
                            end: '2015-11-03',
                            textColor: '#ce352c',
                            color: 'rgba(255, 0, 0, 0.4)'
                        },
                        {
                            id: 6,
                            title: 'Meeting',
                            start: '2015-11-04T10:30:00',
                            end: '2015-11-04T12:30:00',
                            textColor: '#63A223',
                            color: 'rgba(122, 214, 29, 0.31)'
                        },
                        {
                            id: 7,
                            title: 'Lunch',
                            start: '2015-11-02T12:00:00',
                            textColor: '#999900',
                            color: 'rgba(243, 210, 64, 0.4)'
                        },
                        {
                            id: 8,
                            title: 'Meeting',
                            start: '2015-11-02T14:30:00',
                            textColor: '#ce352c',
                            color: 'rgba(255, 0, 0, 0.4)'
                        },
                        {
                            id: 9,
                            title: 'Happy Hour',
                            start: '2015-11-04T17:30:00',
                            end: '2015-11-04T16:30:00',
                            textColor: '#ce352c',
                            color: 'rgba(243, 210, 64, 0.4)'
                        },
                        {
                            id: 10,
                            title: 'Dinner',
                            start: '2015-11-02T20:00:00',
                            textColor: '#ce352c',
                            color: 'rgba(255, 187, 56, 0.4);'
                        },
                        {
                            id: 11,
                            title: 'Birthday Party',
                            start: '2015-11-03T07:00:00',
                            textColor: '#999900',
                            color: 'rgba(243, 210, 64, 0.4)'
                        },
                        {
                            id: 12,
                            title: 'Click for Google',
                            url: 'http://google.com/',
                            start: '2015-11-06',
                            textColor: '#63A223',
                            color: 'rgba(122, 214, 29, 0.31)'
                        }
                    ]
                });
            });

这是输出。

我不知道如何连接这两个并填充fullCalendar.jsp。
我尝试了JQuery.getJSON（）方法，但它没有用完。

Answer 1

如果您想将calendarcontroller输出添加为来源，可以使用cal.fullCalendar( 'addEventSource', source ) source为events json。也来自official documentation

Source可以是一个数组/ URL /函数，就像在events选项中一样。活动将立即从此来源获取并放置在日历上。

所以你可以通过在这里调用ajax来获取客户端的JSON来提供源代码。

另一个用例，如果您想动态地一次放置一个事件，可以使用

假设在客户端检索servlet的输出，并将其分配给名为op的变量

var allEventsConf = op.events;
allEventsConf.forEach(function(conf){
    cal.fullCalendar("renderEvent", {
        id: conf.id,
        title: conf.title,
        start: conf.startDate.format("YYYY-MM-DD"),
        end: conf.endDate.format("YYYY-MM-DD"),
        url: conf.link
    }, true);
});

查看documentation

的 EventData 和 EventRendering 部分

如何使用json数据填充完整日历

1 个答案: