Fullcalendar動いてないから修正してみる

寒いです。皆さんは風邪ひいてませんか? 先週末は大雪でした。今週末も大雪見たいです。 これは私に冬眠しろってことですね??えぇ雪国生まれなもので、雪かきとか無駄に頑張っちゃいますけどね。 ちなみに「雪かき」っていいます?「雪のけ」っていいます?   さて、営業日カレンダーをGoogleカレンダーを使って表示しているところがあったのですが、どうもうまく動いていない模様。Firebugでエラーを見ると、Googleカレンダーのイベントを取得するところでエラーが起こっている模様。 さてさて、困ったぞ、ということで調べました。 どうも原因は2点。


  • Calendar APIがv2→v3になったこと。
  • FullCalendarのバージョンがあがったこと。

ということで修正します。  


Calendar APIを使えるようにする


まずCalendar APIを使えるようにします。v2→v3になって、API Keyが必要になったようです。 API Keyの取得はGoogle Developers Consoleから行います。 アカウントの登録が終わったら、新しくプロジェクトを作り、 141212_01


 メニューのAPIからCalendar APIを選択し、カレンダーをOnにします。


141212_02


141212_03


次に認証情報から新しくKeyを作成します。選択するのはブラウザキーです。


141212_04


141212_05


そうすると下のような画面になるので、ここは何も入力せずに作成を押しちゃってよいみたいです。 これでAPI Keyが取得できました!


141212_06 


141212_07


Fullcalendarをバージョンアップする


サイトに行ってfullcalendar.min.jsをダウンロードしてきます。 ※2014年12月12日現在、最新版は2.2.3のようです。 ダウンロードしてきたら、必要なファイルを読み込みます。




  このような感じになります。   次にカレンダーの設定をします。 「googleCalendarApiKey」に取得したAPI Keyを、 「events」に表示したいカレンダーのIDを設定します。




ちなみに、 カレンダーのIDはGoolgeカレンダーのここです。


141212_08


その他のオプションの設定は本家サイトをご覧ください。   これで無事に営業カレンダーが復活しました。 カレンダーがうまく動かなくて、毎日が営業日のようになっていた悲劇もこれで無事解決です。   今回参考にさせていただいた記事(ありがとうございました!) fullcalendar.js + gcal.jsでGoogle API v3を使ってGoogleカレンダーを表示する


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です