,

Javascriptを使って、Googleカレンダーで次の月を表示させる

おはようございます。こんにちわ。こんばんわ。まっすです。

Googleカレンダーを埋め込む祭、期間を変更する必要があったので、備忘録として、その時行ったことをまとめました。

スポンサードサーチ

表示までの流れ

全体の流れはこんな感じです。

①表示させたい箇所にタグを入れる

②カレンダーを埋め込みコードを取得

③Javascriptを使って埋め込む

では、細かくみていきましょう

①表示させたい箇所にタグを入れる

Googleカレンダーを表示させる箇所に下記のタグを挿入します。

このタグにJavascriptを使ってHTMLタグを挿入します。

スポンサードサーチ

②カレンダーを埋め込みコードを取得

Googleカレンダーから、挿入用タグを取得します。

方法は下記をに詳しく書いてあります。参考にさせていただきました。

https://support.google.com/calendar/answer/41207?hl=ja

Google カレンダーをウェブサイトに追加する
– カレンダー ヘルプ

https://applica.info/google-calendar-embedded

GoogleカレンダーをWebページに埋め込む方法!デザインカスタマイズやレスポンシブ対応させるには? |
アプリやWebの疑問に答えるメディア

③Javascriptを使って埋め込む

1ケ月分だけ表示させるのであれば、②で取得したコードをHTMLファイルに埋め込むだけですが、次の月を表示させたい場合、Javascriptを使用します。

ざっくりとやること言うと、

埋め込みコードを分割して、日付を挟んで、再結合する

になります。ではコードをみていきましょう。

関数 googleCalendarSetを定義して、一番下のwindow.onloadでページの読み込み時に実行します。

googleCalendarSetの中身は、

(1)コードを分割

(2)日付をnew Dateでインスタンスを生成、現在の年、今月と次の月を定義

(3)12月を超えたら1月に戻って、現在の年に+1する

(4)日付を定義

(5)idで指定したタグに、分割した埋め込みコードで日付を挟み込む

この5つの動作をしています。

また、現在の月をそのまま表示させたい場合は、分割したコードを繋げればOKです。

実際に表示するとこのような感じです。

スポンサードサーチ

おわりに

簡単ではありますが、自分で見返す用にGoogleカレンダーを埋め込む方法をまとめました。

また、下記の記事を参考にさせていただきました。