2017-03-03 6 views
0

これは何度も尋ねられていますが、私にはうまくいかない回答が見つかりません。私は完全なカレンダーのサイトですべての手順を踏んだが、どちらもうまくいかない。カレンダーは見ることができますが、イベントはありません。コードを「addCalendarEvents.js」という別のjavascriptファイルに書き込んだ
ここにコードとエラーがあります。
HTML:Googleカレンダーの予定をフルカレンダーに表示できません

<link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> 

<script src='jquery-3.1.1.min.js'></script> 

<script src='fullcalendar/lib/jquery.min.js'></script> 
<script src='fullcalendar/lib/moment.min.js'></script> 
<script src='fullcalendar/fullcalendar.js'></script> 
<script type='text/javascript' src='fullcalendar/gcal.js'></script> 
<script src='addCalendarEvent.js' type='text/javascript'></script> 

Javascriptを:

$(document).ready(function() { 
    console.log('..'); 
    $('#calendar').fullCalendar({ 
     header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       }, 
     googleCalendarApiKey: 'AIzaSyAV4rl5GymKTDcHd44U7k48GgGQoeKzsuI', 
     eventSources: [{ 
        googleCalendarApiKey: 'AIzaSyAV4rl5GymKTDcHd44U7k48GgGQoeKzsuI', 
        googleCalendarId: '[email protected]', 
        className: 'fc-event-email' 
        }] 

     }); 
    }); 

スクリーンショット:errors with the calendar

私が全損でね。どんな助けでも大歓迎です。ありがとうございました。

+0

jQueryを2回参照しています。それは非常に簡単に問題を引き起こす可能性があります。特に異なるバージョンの場合は特にそうです。重複している参照を削除してもう一度やり直し、問題がまだ残っているかどうか確認してください。 – ADyson

答えて

0

あなたが指定したgoogleCalendarId [email protected]の値は、有効なカレンダーIDのようには見えません。これは、予定されているカレンダーが存在するGoogleアカウントに属していると思われる電子メールアドレスです。あなたは何か特別なことを心に持っていましたか? - Googleアカウントで複数のカレンダー(異なるトピックなど)を使用できるため、カレンダーの特定のIDが必然的に必要です。 Googleアカウントの情報は、公開されているカレンダーの概念とは無関係になります。公にアクセスできるカレンダーは、Gmailのアカウントに添付された風船のようなものです。彼らは誰もがアクセス可能な、空中で高い飛行をします。このようなバルーンはgoogleCalendarIdsというラベルが付けられています。

さらに正確には、@group.calendar.google.comは、最も広く使用されているカレンダーIDの最後の部分である必要があります。カレンダーIDはGoogleカレンダーの左側の[マイカレンダー]の下に表示されます。次に、[カレンダーの設定]をクリックします。 fullCalendar.jsがカレンダーデータを要求できるように、カレンダーが公開されていることを確認する必要があります。

fullCalendar documentation chapter on Google Calendarには、googleCalendarIdに関する詳しい情報と、Googleカレンダーインターフェイスでの検索場所が記載されています。同様に、ダウンロードされたfullCalendar zipファイルのdemosフォルダにあるgcal.htmlサンプルのソースコードは、良い基本例を示しています。

追記:あなたは、場合にあなただけの

googleCalendarApiKey: '......yourAPI-key......', 
events: { 
      googleCalendarId: '[email protected]' 
     } 

を使用して、コードを簡素化する、1つのカレンダーを参照する必要がある可能性がありますが、声明className「のFC-イベントを含め、eventSourcesを使用し、なぜ特定の理由があります-Eメール'?それは物事を複雑にしているようです。この方法は私には分かっていませんが、あなたの質問にあなたが記述したタスクのために、すでに通常より多くのコードがあります。通常のGoogleカレンダーAPIをfullCalendarに統合するには、上記の変更が問題の解決策の1つです。うまくいけば、幸せなカレンダーバルーン、先生!

関連する問題