Googleカレンダー

Googleカレンダーでどの日が予約可能なのかを載せれたら便利ですよね!そのカレンダーの表示方法をご紹介したいと思います!


Googleカレンダーのコード取得方法

1、まずはGoogleへのログインをしておきましょう。

2、インターネットブラウザを開き、Googleカレンダーを開きます。使用しているインターネットブラウザや設定しているデフォルトの検索エンジンによっても違いますが、下記に例を載せておきますので、参考にしてください。

3、カレンダーが表示されたら、カレンダー左にある『マイカレンダー』から、HPに表示させたいものを選びます。(名前の横に三つのドットが出てきますのでそれをクリックします)クリック後、『設定と共有』を選びます。

4、左側にある設定一覧から、『アクセス制限』を選択し、『一般公開して誰でも利用できるようにする』にチェックを入れます。

5、同じページ内でスクロールダウン(下に動かす)すると、『カレンダーの統合』という項目があり、そこで『埋め込みコード』をコピーしてください。


コードを編集ページに埋め込む方法

1、のコードを下記のコード内に書き込みます。

※ 下記のコードと上記で取得したGoogleカレンダーのコードをNote等に貼り付けしておき、編集すると間違いにくくお勧めです。(下記の写真のような状態です)

  1. <div class="googleCalendar">PLACE THE GOOGLE CALENDAR IFRAME CODE HERE</div>

2、このコードをカレンダーを貼り付けたい部分に貼り付けます。


3、カレンダーを載せるページのHTMLヘッダーコードに下記のコードをそのまま貼り付けてください。

  1. <style>
  2. .googleCalendar{
  3. position: relative;
  4. padding-bottom: 75%;
  5. height: 0;
  6. overflow: hidden;
  7. }
  8. .googleCalendar iframe{
  9. position: absolute;
  10. top:0;
  11. left: 0;
  12. width: 100%;
  13. height: 100%;
  14. }
  15. </style>

最後に公開ボタンを押して、終了です。

無料でホームページを作成しよう! このサイトはWebnodeで作成されました。 あなたも無料で自分で作成してみませんか? さあ、はじめよう