Googleカレンダーの埋込とカスタマイズ

サイトにGoogleカレンダーを埋め込んでスケジュール表のようにする方法です。

たいした改良はできませんが、デフォルトよりはマシになると思います。

「gcalendar-wrapper.php」がマルウェアと判断されるようになったため、純粋なGoogleの埋め込みコードにしたほうが良さそうです。(2017/01/14追記)

Googleサービスの仕様が変わると正しく表示されなくなるかもしれませんのご注意ください。

 

Step.1 Googleアカウントを取得

Googleにログインしてカレンダーを開きます。

間違えてプライベート用のカレンダーを公開してしまうとマズイので、個人用のGoogleアカウントしかない場合は、公開用に新規アカウントを取得されたほうが良いと思います。

 

Step.2 Googleカレンダーを公開

公開したいカレンダーのプルダウンリストから「このカレンダーを共有」を選択。
共有の詳細設定で「このカレンダーを一般公開する」にチェックを入れ[保存]を押して、カレンダーに戻ります。

この公開設定をしておかないと、サイト上にカレンダーがうまく表示されず、代わりにGoogleのログインフォームが表示されてしまいます。

 

Step.3 埋込コードを取得と貼付

Step.2と同じく、公開したいカレンダーのプルダウンリストから「カレンダー設定」を選択。

「このカレンダーを埋め込む」欄にある「色やサイズなどをカスタマイズします」をクリック。

埋め込むサイトの表示場所にあわせて幅と高さを設定します。
その他、表示させたい内容などの設定もお好みで。

表示された埋込コード(<iframe〜)をコピーしてサイトの表示したい場所に貼付。

↓こんなカンジになります。(デフォルト状態)

Googleさんの「色やサイズなどをカスタマイズ」では、横幅や高さと背景色くらいしか変更できないので、もう少しサイトの雰囲気に合ったデザインにしてみます。

ここまでにしておきましょう。(2017.01.14追記)

 

Step.4 デザインのカスタマイズ

今回は「gcalendar-wrapper.php」というファイルを使います。

こちらの提供元サイトに記載されている「 Download the wrapper script 」をクリックして「gcalendar-wrapper.php」をダウンロード。
ダウンロードしたZIPファイルを解凍するとPHPファイルになるので、サイトの分かりやすい場所(「js」フォルダの中など)へアップします。

先ほどHTMLに貼り付けた埋込ソースコードの「https://calendar.google.com/calendar/embed」の部分(?の手前まで)を設置した「gcalendar-wrapper.php」までのパスに書き換えします。

↓これを

<iframe ・・・ src="https://calendar.google.com/calendar/embed?・・・” ・・・>

↓こんな感じに(同階層の「js」フォルダへ入れた場合の例)

<iframe ・・・ src="/js/gcalendar-wrapper.php?・・・" ・・・>

これで準備完了。

あとは、「gcalendar-wrapper.php」の中に書いてあるCSSの指定をお好みで変更したり追加したりします。

「gcalendar-wrapper.php」の設定についてはまた次の機会に。

CSSの指定箇所はPHPのヒアドキュメント(= <<<EOT〜EOT;の間)に記述されているので少し解り辛いかもしれませんが、色々試してみてください。

完成サンプルはこちら

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)