,

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

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

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

スポンサードサーチ

表示までの流れ

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

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

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

③Javascriptを使って埋め込む

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

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

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

<div id="calendar2"></div>

このタグに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を使用します。

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

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

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

function googleCalendarSet(){
  //カレンダーの埋め込みコードを分割する
  let calendar1 = '<iframe src="https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showDate=1&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=500&wkst=1&bgcolor=%23FFFFFF&src=ja.japanese%23holiday%40group.v.calendar.google.com&color=%238D6F47&ctz=Asia%2FTokyo';

  let calendar2 = '" style="border-width:0" width="600" height="500" frameborder="0" scrolling="no"></iframe>';

  /*来月のカレンダー*/
    let date = new Date;
    let Year = date.getFullYear();//年を取得
    let Month = date.getMonth()+1;//月を取得.0からでなく、1からカウントを始める
    let nextMonth = Month+1;

  //12月を超えると1月に
   if(nextMonth>12){
      nextMonth-=12;
      Year+=1;
    };

  //10以下を二ケタに
    if(nextMonth<10){
      nextMonth = "0"+nextMonth;
    };

  //日付を出力
    let dates = "&dates="+String(Year)+String(nextMonth)+"01%2F"+String(Year)+String(nextMonth)+ "01";
    
  //idで指定したタグを書き換え
    document.getElementById("calendar2").innerHTML = calendar1+dates+calendar2;
 }
 window.onload = googleCalendarSet;

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

googleCalendarSetの中身は、

(1)コードを分割

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

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

(4)日付を定義

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

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

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

<div id="calendar2"></div>
document.getElementById("calendar1").innerHTML = calendar1+calendar2;

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

スポンサードサーチ

おわりに

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

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