Googleカレンダーのイベントがfullcalendar localhostに表示されない

Question

ローカルサイトのGoogleカレンダーからイベントを表示しようとしています。laravel 5.4を使用して開発しています。私はララール図書館を試してみることにしました。私はこれについて多くの例を見つけることができません。 とにかく、カレンダーを設定した後、私がGoogleカレンダーに追加したイベントは表示されません。

{{ 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') }} 

これは、ページにレンダリングされたものである：これは私のセクションが含まれている

@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 

：

これは私の非常に基本的なコードです。

私のGoogleカレンダーが公開されている：

は、これは私が私のGoogleカレンダーに持っているものです。

Answer 1

正しいURLを使用していることを確認してください。 FullCalendarは、カレンダー全体ではなくXMLフィードを求めています。カレンダーはすでに公開されているので、それから、あなたのカレンダーのXMLフィードのURLを取得する必要があります。

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. 

関連スレッド：

• Fullcalendar not showing data
• FullCalendar: events not rendering initially from function call (AJAX)

・ホープ、このことができます！

Answer 2

これは、GoogleカレンダーでFullCalendarを使用しているときに最近変更されたもので、動作させるにはしばらく時間がかかりました。

「googleCalendarId」として持っているものは、「イベント」行にあるべきものです。だから、もっとこのようにする必要があります：

ここ

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); 
     } 

    }); 

});