Googleカレンダーをサイトに貼り付ける方法

Image

コワーキングスペースなど店舗の営業をしているところでは営業日やイベント日のお知らせをサイトで表示したいと思います。複数人で予定を管理するにはやはりGoogleカレンダーが便利かなと思いましたので、Googleカレンダーをサイトに貼り付ける方法について確認してみました。

公開用のGoogleカレンダーを作る

Googleカレンダーページに行き、

Image

右側にある歯車のマークをクリックして設定をクリック

Image

カレンダーをクリック

Image

新しいカレンダーの作成 をクリック

Image

カレンダー名を入力し、このカレンダーを一般公開するにチェックを入れて、カレンダーを作成 をクリックします

Image

一般公開するにチェックが入っているとこの確認が出ますので OK をクリックします。

公開用のGoogleカレンダーにデータを入れる

適当に、

Image

こんな感じで 【一般公開】営業カレンダー に予定を入れていきます。

Image

このぐらい入れてみました。

貼り付け用のコードをコピーする

htmlなどに貼り付けるためのコードをコピーします。

Image

歯車>設定

Image

カレンダー クリック

Image

【一般公開】営業カレンダー をクリック

Image

表示されたページの下の方に、「このカレンダーを埋め込む」と書いてある部分があります。テキストエリアのコードをコピーして、テキストファイルなどに貼り付けておきます。

試しに、WordPressに貼り付けてみる

試しにWordPressで作ったサイトで貼り付けを試してみます。

Image

固定ページ>新規追加 をクリックして タイトルを入力後、テキストタブに先ほどコピーしたコードを本文に貼り付けます。

これを表示すると、

Image

このようにGoogleカレンダーの内容がサイトに表示されるようになりました!

カレンダーをカスタマイズしてみる

Googleカレンダーはデフォルトでの日付形式が 31/12/2014 と 午後1時 などの表示なのでこれをカスタマイズします。

歯車>設定 のページで

Image

このように指定して 保存 をクリックします。

また個別のカレンダーをカスタマイズしたいと思います。先ほど、貼り付け用のコードをコピーしたページに

Image

色やサイズなどをカスタマイズします というリンクがあるのでクリックします。

Image

こういうページが表示されます。

Image

私は日曜日始まりが好きなのでこのように変更しました。

Image

祝日を表示させたいので表示するカレンダー日本の祝日 をチェックします。

この状態で、

Image

下記のコードを貼り付けると、このカレンダーがウェブページに挿入されます のテキストエリアのコードをコピーして、

Image

先ほどの固定ページに貼り付けて、更新します。

Image

このように日曜日始まり祝日も表示されました。

コワーキングスペースのサイトにはこれ絶対付けよう!と思いました

いままでGoogleカレンダーが他のサイトに貼ってあるのを見たことはあるんですがあまり熱心に触ったことがありませんでした。

今回、どんなカレンダーが表示されたのかな?と見てみると例えばあるイベントをクリックすると、

Image

このように、マイカレンダーにコピーというリンクが出てきて、

Image

自分がいつも使っているカレンダーに簡単にコピーできます。

また、

Image

週表示で見ると、時間帯別の予定が分かりやすいのでコワーキングスペースなどの会議室予約とかに便利そうです。また、

Image

予定リストで表示するとコワーキングスペースであればイベントがずらっと表示されてどんなイベントがあるのか一目で分かるようになっています。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

コメント

  1. […] 大変わかりやすい解説をしてくださっているサイト ☞RYUS BLOG様 […]

  2. […] カレンダー公開方法:https://usortblog.com/googlecalendarpaste/ […]

トップへ戻る