Googleカレンダーをホームページに表示させる方法
R-web予約状況やスケジュール案内など、Googleカレンダーを使って、HP上にカレンダー表示をさせたい場合の方法です。
Googleカレンダーを使うと、スマホやタブレットからも更新できますし、外にいる時などでもどこからでも更新できますので便利です。
そのまま吐き出されるタグだと、レスポンシブデザインに対応していないので、対応させる方法もちょこっとついでに紹介。
1. まずはGoogleにログイン！
2.Googleカレンダーを表示する
3.新しいカレンダーを作成する
「マイカレンダー」の右横の▼をクリックして、「新しいカレンダー作成」にすすみます。
カレンダー名、説明を入力します。
そして「このカレンダーを一般公開する」にチェックを入れて、上部の「カレンダーを作成」ボタンをクリックします。
そうすると、このように「一般公開してもよろしいですか？」とという画面が出ますが、HPに公開するものを作っているので、もちろんOKですね！
4.カレンダー設定をする
先ほど新規作成したカレンダーの「カレンダー設定」をクリックします。
そうすると、画面にこのようにタグが表示されています。この部分をHTMLに貼り付けると、インラインフレームとして表示されます。
この時に、「色やサイズなどをカスタマイズします」という所で、カスタマイズも可能です。
※このままのタグを貼ると、レスポンシブデザインの場合はインラインフレーム部分がはみ出てしまいますので、width="800" という部分を width="100%" に書きかえると、伸縮してくれますので、レスポンシブ対応になります！
5.カレンダーに予定を書く
あとはカレンダーに予定を入れて行きましょう！
タイトルを入れた部分がカレンダーに表示されます。
その下の「終日」のチェックを外すと開始と終了の時間も入力することが出来ます。
予定の色もそれぞれ設定出来ますので、色分けしたい場合はチェックをして下さい。
