google

【Googleカレンダー】今月、来月、再来月のカレンダーをサイトに埋め込む、埋め込みたい場合の方法【Javascript】

  /

WordPressテーマの、子テーマの「header.php」などに書きます。

<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>

 

<div～>googleカレンダーのiframe</div> で、カレンダーを表示させたい場所に書きます。

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

 

※わかりやすい参考サイト　ワラクリ

 

RELATED POST