Question

我正在尝试使用laravel 5.4在我开发的本地网站上显示来自Google日历的事件。我决定不尝试使用laravel库，因为我找不到很多这方面的例子。无论如何，在设置日历后，我在谷歌日历中添加的事件都不会显示。

这是我非常基本的代码：

@extends('layouts.home')
@section('content')
<script type="text/javascript">
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            googleCalendarApiKey: 'RemovedSensitiveData',
            events: {
                googleCalendarId: 'mjd3mg13mecqeb3ltcc9n4fmcc@group.calendar.google.com',
                className: 'gcal-event',
                events: 'https://calendar.google.com/calendar/embed?src=mjd3mg13mecqeb3ltcc9n4fmcc%40group.calendar.google.com&ctz=Europe/Bucharest'
            }
        });
    });
</script>
<div id='calendar'></div>
@stop

这是我的包含部分：

{{ Html::style('js/fullcalendar-3.4.0/fullcalendar.css') }}
{{ Html::style('js/fullcalendar-3.4.0/fullcalendar.print.css') }}

{{ Html::script('js/jquery-3.2.0.min.js') }}
{{ Html::script('js/fullcalendar-3.4.0/lib/jquery-ui.min.js') }}
{{ Html::script('js/fullcalendar-3.4.0/lib/moment.min.js') }}
{{ Html::script('js/bootstrap.js') }}
{{ Html::script('js/npm.js') }}
{{ Html::script('js/script.js') }}
{{ Html::script('js/fullcalendar-3.4.0/gcal.js') }}
{{ Html::script('js/fullcalendar-3.4.0/fullcalendar.js') }}
{{ Html::script('js/fullcalendar-3.4.0/fullcalendar.min.js') }}

这是页面中呈现的内容。 calendar

这就是我在谷歌日历上的内容： google-calendar

我的谷歌日历是公开的。

Answer 1

确保您使用正确的网址。 FullCalendar需要XML Feed，而不是整个日历。由于您的日历已公开，因此您必须获取日历的XML Feed网址：

In the Google Calendar interface, locate the "My Calendar" box on the left
Click the arrow next to the calendar you need.
A menu will appear. Click "Calendar settings."
In the "Calendar Address" section of the screen, click the XML badge.
Your feed's URL will appear.

相关主题：

希望这有帮助！

Answer 2

最近将FullCalendar与Google日历结合使用时已经发生了变化，我花了一段时间才开始工作，所以我想我会分享。

你所拥有的'googleCalendarId'应该是'events'行中的内容。所以应该更像这样：

 googleCalendarApiKey: 'RemovedSensitiveData',
 events: 'mjd3mg13mecqeb3ltcc9n4fmcc@group.calendar.google.com',

以下是FullCalendar网站的演示：https://fullcalendar.io/js/fullcalendar-3.5.1/demos/gcal.html

如果你'查看源'，你会看到他们如何构建他们的演示代码。我也复制了以下内容以供参考。

<script>

$(document).ready(function() {

    $('#calendar').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,listYear'
        },

        displayEventTime: false, // don't show the time column in list view

        // THIS KEY WON'T WORK IN PRODUCTION!!!
        // To make your own Google API key, follow the directions here:
        // http://fullcalendar.io/docs/google_calendar/
        googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',

        // US Holidays
        events: 'en.usa#holiday@group.v.calendar.google.com',

        eventClick: function(event) {
            // opens events in a popup window
            window.open(event.url, 'gcalevent', 'width=700,height=600');
            return false;
        },

        loading: function(bool) {
            $('#loading').toggle(bool);
        }

    });

});

谷歌日历事件不会显示到fullcalendar localhost

2 个答案: