整合谷歌日历与fullcalendar

时间:2017-11-20 10:59:10

标签: json symfony fullcalendar google-calendar-api

我正在研究一个项目symfony3,以便将googleCalendar与fullcaldendar集成。我想使用googlecalendar来提供fullcalendar以显示我在googlecalendar中的所有事件,然后每当我在fullcalendar中更改事件时,它也将在googlecalendar中更改。所以步骤是从googleCalendar获取我已经完成的google事件,并且我已经尝试以json的格式制作:

$ myjsonfile:

[{
"title": "Rdv Ecole",
"start": "2017-11-13T10:00:00+01:00",
"end": "2017-11-13T12:00:00+01:00"
 }, {
"title": "testing functions",
"start": "2017-11-20T13:15:00+01:00",
"end": "2017-11-20T14:15:00+01:00"
 }, {
"title": "another test",
"start": "2017-11-20T17:30:00+01:00",
"end": "2017-11-20T18:30:00+01:00"
 }, {
"title": "reuinion data vc",
"start": "2017-11-21T09:00:00+01:00",
"end": "2017-11-21T10:00:00+01:00"
 }]

因为我正在使用symfony3,所以我做了一个

 return $this->render('calendar/loadcalendar.html.twig',['gevents'=>$myjsonfile]);

然后在我的页面中显示该事件:

$(document).ready(function() {

        $('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');
            },

            eventLimit: true, // allow "more" link when too many events
            eventSources: [
                {
                    url: "http://localhost/prog/web/app_dev.php/calendar/load",
                    dataType: "json",
                    method: 'GET'
                }
            ],
            eventClick: function(event) {

                var title = prompt('Change Event title:');
                event.title = title;
                $('#calendar').fullCalendar('updateEvent', event);

            }
        });

现在问题是我无法从我发送的json加载事件,那么有人可以给我一些建议吗?感谢

1 个答案:

答案 0 :(得分:2)

在我的项目中,我这样做:

$('#calendar').fullCalendar({
    /* [...] */
    events: "{{ path('ajax_calendar_load') }}",
    /* [...] */

我的加载动作返回常规json:

    $response = new JsonResponse();
    $response->setContent($events);
    return $response;