Googleカレンダーを2か月や3か月分埋め込み表示させるJavascript

こんにちは、Webプログラマーのwishigrowです。

お店や、イベントをやっている人はWebサイトにカレンダーを埋め込むことがあると思います。
今月分だけだとコピペで簡単なのですが、翌月・翌々月まで表示させるとなると、プログラマーの出番になってきますね。

検索しても分かりやすい記事が見つからなかったので、ちょっと頑張りました。
そのコードをワラクリに載せておきます。

Googleカレンダーの埋め込み

Googleカレンダーの埋め込みは簡単です。
ほとんどコピペでOKです。
Google カレンダーをウェブサイトに追加する
この公式ヘルプの通り。

しかし、翌月や翌々月の表示はこのヘルプには載っていないし、プログラミングが必要になってきます。

指定した月を表示させるには

裏技的ですが、やり方があるようです。
例えば、2020年4月のカレンダーを表示させたい場合は、”&dates=20200401/20200401”をコード内に差し込む。
それだけです。

この書式に従って、翌月や翌々月の年月を差し込めばいいわけですが、人力で書き換えるなんて馬鹿らしいですよね。
というわけで、現在の年月を取得して、1ヶ月足したり2か月足したりして、書式の通りに出力するプログラムを組む必要があるんです。

1.Googleカレンダーをカスタマイズして埋め込みコードをコピー

さっき書いたヘルプに従って、カスタマイズしてコードを出しましょう。

googleカレンダーのカスタマイズ

背景色とか、何曜日始まりとか、タイトルとかいじれます。

2.Javascriptを書く

PHPで書いてもいいけど、汎用性を考えてJavascriptにしてみました。
jQueryも無しでいきました。

<script type="text/javascript">
 window.onload = googleCalendarSet;
 function googleCalendarSet(){
 //カレンダーの埋め込みコードをコピペして分割する
 var calendarCode1 = '<iframe src="https://calendar.google.com/calendar/embed?';
 var calenderCode2 = '/*embed?以下をここにコピペ*/'
 /*来月のカレンダー*/
 var today = new Date;
 var myYear = today.getFullYear();//年を取得
 var myMonth = today.getMonth()+1;//月を取得、1月が0から始まるからややこしい
 var nextMonth = myMonth+1;
 //12月を超えると1月に
  if(nextMonth>12){nextMonth-=12;myYear+=1;};
 //10以下を二ケタに
 if(nextMonth<10){nextMonth = "0"+nextMonth;};
 //日付を出力
 var dates = "dates="+String(myYear)+String(nextMonth)+"01/"+String(myYear)+String(nextMonth)+"01&amp;";
 //指定したidを書き換え
 document.getElementById("nextMonthCal").innerHTML = calendarCode1+dates+calenderCode2;
 /*再来月のカレンダー*/
 var next2Month = myMonth+2;
 if(next2Month>12){next2Month-=12;
 if(nextMonth==12){myYear+=1;};
 };
 if(next2Month<10){next2Month = "0"+next2Month;};
 var dates = "dates="+String(myYear)+String(next2Month)+"01/"+String(myYear)+String(next2Month)+"01&amp;";
 document.getElementById("next2MonthCal").innerHTML = calendarCode1+dates+calenderCode2;
 /*今月のカレンダー*/
  document.getElementById("MonthCal").innerHTML = calendarCode1+calenderCode2;
 }
 </script>


headの中でも、bodyの中でも、外部ファイルでも、どこに入れてもOKです。
再来月が必要ない方は、その部分をザックリ消しちゃってください。

3.HTML内の表示させたい場所にidを書く

 <div id="MonthCal"></div><!--今月-->
 <div id="nextMonthCal"></div><!--来月-->
 <div id="next2MonthCal"></div><!--再来月-->


pタグの中に入れたい場合は、”span id=◯◯”にしましょう。

以上で表示されるはず。
バグがあったらごめんなさい。
「こういうコードの方がスマートだぜ」って方は、ご指摘ください。

募集中のイベントはありません

投稿者: 石黒わらじろう

京都の古い民家で暮らしている。 趣味はランニングとブログと盆踊りを含むフォークダンス。 別名義で書いた小説は映画の原作として採用された。 自分で建てた小屋にて暮らしていたことがある強靭な狂人。 地球にも自分にも健康な生活がしたい。

ディスカッションに参加

2件のコメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です