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カレンダーを表示する