【WordPress】FullCalendar(Googleカレンダー連携)の使い方

別の仕事で、
WordWordPressのブラグイン、「FullCalendar」を実装した。
下記のつまずきやすいポイントがあったので、この機会にまとめる。

  • WordPressの管理画面から検索できるブラグインで、「wp-FullCalendar」があるが別物
  • FullCalendarパッケージをWordpressフォルダのどこにおけばいいか迷った
  • FullCalendarのパスを間違えてしまった(テストサイトとしてメインサイトのサブとして作ったため)
  • GoogleAPIや、FullCalendarのバージョンによって実装方法が微妙に異なる
    (実装方法を検索すると、いろいろなバージョンの実装方法が見つかるため混乱、つまずきやすい)

FullCalendarはWordPress管理画面ではなく本家サイトからダウンロード

WordPress管理画面から「FullCalendar」と検索すると、「wp-FullCalendar」というのが出ますが、全くの別物。

下記の本家サイトからダウンロードすればOK。

本家サイト(英語)
https://fullcalendar.io/docs/getting-started

現時点(2019/12/23)では、fullcalendar-4.3.1.zip すなわち、Ver4が最新版のようです。
ここでは、上記のバージョンの設定だけお話します。
Ver1~3の説明は他のサイトを見て下さい。
というのは、Ver1〜3と4とでは、どのバージョンもやり方が微妙に異なるからです。
かくいう私もVer4をDLしてるのにVer3のマニュアルを間違ってみていたりして詰まってましたので
皆さんはお気をつけ下さい!(下図)

FullCalendarのどのファイルをどの場所に置けば良い??

FullCalendar本家サイトからダウンロードできるファイルはかなり多いが、必要なファイルはそんなにはないです。
必要なものだけをWordPressにアップロードすればOK!
といっても、どのファイルをどの場所に置けばいいの?って迷いますよね。
さらに置く場所がHPでなくてWordPressってなるとかなりハードルが高くなります。

FullCalendarからDLできるもの

  • examplesフォルダ
    (仕様例たくさんあり)
  • packagesフォルダ
    • bootstrapフォルダ(bootstrap風のSimpleCalendar)
    • coreフォルダ(基本)
    • daygridフォルダ(カレンダー表示用)
    • google-calendarフォルダ(Googleカレンダー連携用)
    • interactionフォルダ(クリックイベントの実装用)
    • listフォルダ(リスト表示用)
    • luxonフォルダ(luxonブラグイン用)
    • momentフォルダ(momentブラグイン用)
    • moment-timezoneフォルダ(moment-timezoneブラグイン用)
    • rruleフォルダ(rruleブラグイン用)
    • timegridフォルダ(timegridブラグイン用)
  • vendarフォルダ(ここは見なくてOK)
  • LICENSE.txt(ライセンスのことが書いてます)
  • README.md(このFullCalendarの目次的な位置づけです)

Googleカレンダーと連携に必要なもの

【最低限必要】

  • coreフォルダのmain.jsと、main.css

【表示させたいタイプによって変わるもの】

下のどっちかは必ず必要です。今回はdaygrid。

  • daygridフォルダのmain.jsと、main.css
  • listフォルダのmain.jsと、main.css

【ブラグイン】

  • google-calendarフォルダのmain.js(daygrid用のみ)

置く場所と格納先のパス

ここは、いろいろ調べたんですが、自由、、、みたいになってますけど、
ファイルの組織的に考えると、今のWordPressに適用しているThemaフォルダ直下に
おいたほうがよいです。

場所的には、TOP > wp-contents > themas > (themaの名前)って感じですね。
私は、このthemaの名前のフォルダの下に、「FullCalendar」というフォルダを作って
そこにGoogleカレンダー連携に必要なファイルをもってきておきました。
(なお、全部、main.jsとmain.cssばっかりなので、フォルダも分けてcore、daygrid、google-calendarの3つ作っています)

ここで私はパスを間違えてしまったんですが、(置きたかったのが本番環境ではなくサブドメインのテスト環境の中のものだったので)はじめてWordpressのフォルダが現れる(wp-contentsとか)ところを起点(TOP)とします。
たとえば、HPのURLが、http://user.co.jpだとすると、
パスは 「 http:¥¥user.co.jp¥wp-contents¥themas¥(themaの名前)¥FullCalendar¥ 」となります。
あとはファイル先をくっつければ直接パスの出来上がりです。

コードはどこへ書く?

次に困ったことは、<head>に書くべきところをどこに書くか、でした。
クライアントとしては、特別な記事ではなく、一般投稿記事に、カレンダーを実装したかったので、
普通は、header.phpに書くべきなのですが、その記事だけに実装したいので、さてどうしたものかと考えたところ、
カスタムフィールドを設定して、そこにheader部分を入れることで解決しました。
これについては別途説明します。

そしてあらかじめ、Googleカレンダーを作成、APIと、IDを取得しておきました。

コード(カスタムフィールドに書いたもの)

※上記の../の部分は人によって異なるので前章の説明を参考にパスを書いて下さい。
※ ‘APIキーをここに書く’は ’ ’の中にAPIキーを書いて下さい。IDも同様。

最後に、下記を記事に書いてプレビューなり公開なりすれば、カレンダーが出てきます。

Googleカレンダーに2種類のカレンダーを設定する

classnameはeventsとかtrainingとしてますが、あんまり意味ないかもです。
後でCSS設定するときに使えるかも?程度かと。
これで色分けして表示されます。

 

まとめ

今回チャレンジしたカレンダー実装でしたが、結局使わない方向になりそうです。(笑)
理由としては、こちらFullCalendarはクリックするとGoogleカレンダーに飛ぶんですが、表示が残念な感じになるからでした。見た目はいいんですけどね。。。

でも、今回チャレンジしたことでいろいろ覚えたこともあったり、WordPressに慣れたこともあったので、結局使わなくても、自分の血肉となりそうなので、それはそれでよし!としましょう!